React components custom for antd at Snappy.vn

author: vuluu2k

You are visiting docs now!

📦 Install

npm install snappy-lib

yarn add snappy-lib

Attachment

npm install antd @ant-design/icons react-icons

yarn add antd @ant-design/icons react-icons

🔨 Usage

import { SnyButton, SnyStatus } from 'snappy-express';

const App = () => (
  <>
    <SnyButton type="primary">Snappy</SnyButton>
    <SnyStatus statusArray={[]} status="" status_vi="" />
  </>
);

SnyStatus

SnyStatus.propTypes = {
  statusArray: PropTypes.array,
  status: PropTypes.string,
  status_vi: PropTypes.string,
  type: PropTypes.string,
  label: PropTypes.string,
  children: PropTypes.node,
  tooltip: PropTypes.object,
  badge: PropTypes.object,
  style: PropTypes.object,
  className: PropTypes.string,
};

SnyStatus.defaultProps = {
  statusArray: [
    { array: ['request_received', 'waiting_for_return', 'returning', 'part_delivery'], color: 'orange' },
    { array: ['processing_picked_up', 'out_for_delivery', 'picked_up'], color: 'blue' },
    { array: ['import_picking_warehouse', 'on_the_way', 'import_returning_warehouse', 'returned'], color: 'cyan' },
    { array: ['picked_up_fail', 'undeliverable', 'return_fail', 'canceled'], color: 'red' },
    { array: ['processing_on_the_way', 'on_the_way_returning', 'waiting_on_the_way'], color: 'purple' },
    { array: ['delivered'], color: 'green' },
  ],
  status: undefined,
  status_vi: 'SnappyExpress',
  type: '',
  label: undefined,
  children: undefined,
  tooltip: {},
  badge: {},
  style: {},
  className: '',
};

SnyButton

SnyButton.propTypes = {
  label: PropTypes.node,
  type: PropTypes.string,
  size: PropTypes.string,
  style: PropTypes.object,
  icon: PropTypes.node,
  loading: PropTypes.bool,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
  className: PropTypes.string,
  suffixIcon: PropTypes.node,
  shape: PropTypes.string,
  badge: PropTypes.object,
  iconButton: PropTypes.bool,
  tooltip: PropTypes.object,
  template: PropTypes.string,
};

SnyButton.defaultProps = {
  label: 'SnappyExpress',
  type: 'default',
  size: 'md',
  style: {},
  icon: false,
  loading: false,
  onClick: e => e.isDefaultPrevented(),
  disabled: false,
  className: '',
  suffixIcon: false,
  shape: '',
  badge: {},
  iconButton: false,
  tooltip: {},
  template: '',
};

SnyTabs

SnyTabs.propTypes = {
  options: PropTypes.array,
  onClick: PropTypes.func,
  style: PropTypes.object,
  styleTab: PropTypes.object,
  className: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  arrayActive: PropTypes.array,
};

SnyTabs.defaultProps = {
  options: [
    { value: 1, label: 'SnappyExpress1' },
    { value: 2, label: 'SnappyExpress2' },
    { value: 3, label: 'SnappyExpress3' },
    { value: 4, label: 'SnappyExpress4' },
  ],
  onClick: (value, label) => console.log(value, label),
  style: {},
  styleTab: {},
  className: '',
  value: 1,
  arrayActive: [],
};