@lemon-fe/components 0.0.0

package/es/BaseTable/utils.js

@@ -0,0 +1,26 @@
+export function isColumnType(col) {
+  return col.children === undefined;
+}
+export function getColumnKey(col) {
+  if (typeof col.dataIndex === 'string' || typeof col.dataIndex === 'number') {
+    return col.dataIndex;
+  }
+
+  if (Array.isArray(col.dataIndex)) {
+    return col.dataIndex.join('-');
+  }
+
+  return col.key;
+}
+export function randomStr() {
+  var len = 8;
+  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz';
+  var maxPos = chars.length;
+  var pwd = '';
+
+  for (var i = 0; i < len; i += 1) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+
+  return pwd;
+}

package/es/DurationPicker/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { Moment } from 'moment';
+import type { RangePickerProps } from 'antd/lib/date-picker';
+declare type Value = {
+    type: string;
+    option: string;
+    dates?: [string, string];
+};
+declare type DateType = {
+    label: string;
+    value: string;
+};
+declare type Option = {
+    label: string;
+    value: (() => [Moment, Moment]) | null;
+};
+interface Props extends Omit<RangePickerProps, 'value' | 'onChange'> {
+    prefixCls?: string;
+    types: DateType[];
+    options?: Option[];
+    dateFormat?: string;
+    value?: Value;
+    onChange?: (value: Value) => void;
+}
+export default function DurationPicker(props: Props): JSX.Element;
+export {};

package/es/DurationPicker/index.js

@@ -0,0 +1,234 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useMemo, useState, useEffect } from 'react';
+import { DatePicker, Dropdown, Menu } from 'antd';
+import moment from 'moment';
+import { PREFIX_CLS } from '../constants';
+import Down from '../Icons/Down';
+var defaultOptions = [{
+  label: '今天',
+  value: function value() {
+    return [moment().startOf('day'), moment().endOf('day')];
+  }
+}, {
+  label: '昨天',
+  value: function value() {
+    return [moment().add(-1, 'days').startOf('day'), moment().add(-1, 'days').endOf('day')];
+  }
+}, {
+  label: '最近3日',
+  value: function value() {
+    return [moment().add(-2, 'days'), moment()];
+  }
+}, {
+  label: '本周',
+  value: function value() {
+    return [moment().startOf('isoWeek'), moment().endOf('isoWeek')];
+  }
+}, {
+  label: '上周',
+  value: function value() {
+    return [moment().startOf('isoWeek').add(-1, 'week'), moment().endOf('isoWeek').add(-1, 'week')];
+  }
+}, {
+  label: '最近7日',
+  value: function value() {
+    return [moment().add(-6, 'days'), moment()];
+  }
+}, {
+  label: '本月',
+  value: function value() {
+    return [moment().startOf('month'), moment().endOf('month')];
+  }
+}, {
+  label: '上月',
+  value: function value() {
+    return [moment().add(-1, 'months').startOf('month'), moment().add(-1, 'months').endOf('month')];
+  }
+}, {
+  label: '最近30日',
+  value: function value() {
+    return [moment().add(-29, 'days').startOf('day'), moment().endOf('day')];
+  }
+}, {
+  label: '本季',
+  value: function value() {
+    return [moment().startOf('quarter'), moment().endOf('quarter')];
+  }
+}, {
+  label: '上季',
+  value: function value() {
+    return [moment().add(-1, 'quarters').startOf('quarter'), moment().add(-1, 'quarters').endOf('quarter')];
+  }
+}, {
+  label: '最近90日',
+  value: function value() {
+    return [moment().add(-89, 'days').startOf('day'), moment().endOf('day')];
+  }
+}, {
+  label: '最近120日',
+  value: function value() {
+    return [moment().add(-119, 'days').startOf('day'), moment().endOf('day')];
+  }
+}, {
+  label: '今年',
+  value: function value() {
+    return [moment().startOf('year'), moment().endOf('year')];
+  }
+}, {
+  label: '自定义时段',
+  value: null
+}];
+export default function DurationPicker(props) {
+  var _result$type, _result$option, _result$option2;
+
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
+      types = props.types,
+      _props$options = props.options,
+      options = _props$options === void 0 ? defaultOptions : _props$options,
+      valueProp = props.value,
+      _props$dateFormat = props.dateFormat,
+      dateFormat = _props$dateFormat === void 0 ? 'YYYY-MM-DD' : _props$dateFormat,
+      onChange = props.onChange;
+  var defaultValue = useMemo(function () {
+    if (valueProp === undefined) {
+      var _options$0$value, _options$;
+
+      return {
+        type: types[0].value,
+        option: options[0].label,
+        dates: (_options$0$value = (_options$ = options[0]).value) === null || _options$0$value === void 0 ? void 0 : _options$0$value.call(_options$).map(function (item) {
+          return item.format(dateFormat);
+        })
+      };
+    }
+
+    return valueProp;
+  }, []);
+
+  var _useState = useState(defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  useEffect(function () {
+    if (value !== defaultValue && value !== valueProp && onChange) {
+      onChange(value);
+    }
+  }, [value]);
+  useEffect(function () {
+    if (valueProp !== undefined) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  var result = useMemo(function () {
+    var type = types.find(function (item) {
+      return item.value === value.type;
+    });
+    var option = options.find(function (item) {
+      return item.label === value.option;
+    });
+    var dates = value.dates ? value.dates.map(function (date) {
+      return moment(date, dateFormat);
+    }) : undefined;
+    return {
+      type: type,
+      option: option,
+      dates: dates
+    };
+  }, [value]);
+
+  var handleChangeType = function handleChangeType(item) {
+    setValue(function (prev) {
+      if (item.value === prev.type) {
+        return prev;
+      }
+
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        type: item.value
+      });
+    });
+  };
+
+  var handleChangeOption = function handleChangeOption(item) {
+    setValue(function (prev) {
+      if (item.label === prev.option) {
+        return prev;
+      }
+
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        option: item.label,
+        dates: item.value !== null ? item.value().map(function (date) {
+          return date.format(dateFormat);
+        }) : undefined
+      });
+    });
+  };
+
+  var handleChangeDates = function handleChangeDates(dates) {
+    setValue(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        dates: dates ? dates.map(function (item) {
+          return item.format(dateFormat);
+        }) : undefined
+      });
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-duration")
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(Menu, null, types.map(function (item) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        onClick: function onClick() {
+          return handleChangeType(item);
+        },
+        key: item.value
+      }, item.label);
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-duration-type")
+  }, (_result$type = result.type) === null || _result$type === void 0 ? void 0 : _result$type.label, /*#__PURE__*/React.createElement(Down, {
+    style: {
+      color: '#BFBFBF'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-duration-picker")
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(Menu, null, options.map(function (item) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: item.label,
+        onClick: function onClick() {
+          return handleChangeOption(item);
+        }
+      }, item.label);
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-duration-option")
+  }, (_result$option = result.option) === null || _result$option === void 0 ? void 0 : _result$option.label, /*#__PURE__*/React.createElement(Down, {
+    style: {
+      color: '#BFBFBF'
+    }
+  }))), /*#__PURE__*/React.createElement(DatePicker.RangePicker, {
+    value: result.dates,
+    onChange: handleChangeDates,
+    disabled: ((_result$option2 = result.option) === null || _result$option2 === void 0 ? void 0 : _result$option2.value) !== null
+  })));
+}

package/es/DurationPicker/index.less

@@ -0,0 +1,63 @@
+@import '../theme.less';
+
+.@{prefixCls}-duration {
+  display: flex;
+  width: 100%;
+  height: @height-base;
+
+  .ant-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 12px 0 16px;
+    color: #686868;
+    font-size: 14px;
+    text-align: center;
+    cursor: pointer;
+
+    & > .anticon {
+      margin-left: 8px;
+      font-size: 16px;
+    }
+  }
+
+  &-type.ant-dropdown-trigger {
+    flex: 0 0 138px;
+    margin-right: 8px;
+    border: 1px solid @select-border-color;
+    border-radius: @border-radius-base;
+  }
+
+  &-option.ant-dropdown-trigger {
+    position: relative;
+    flex: 0 0 122px;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      display: block;
+      width: 1px;
+      height: 14px;
+      margin-top: -7px;
+      background-color: #d8d8d8;
+      content: '';
+    }
+  }
+
+  &-picker {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    border: 1px solid @select-border-color;
+    border-radius: @border-radius-base;
+
+    .ant-picker {
+      flex: 1;
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}

package/es/EditableTable/EditableCell.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { EditableCellFocusedType } from './typings';
+export default function EditableCell(props: {
+    focused: EditableCellFocusedType;
+    children: ReactNode;
+    bordered?: boolean;
+    disableUpDown?: boolean;
+    disableLeftRight?: boolean;
+    errors?: string[];
+    onFocus: () => void;
+}): JSX.Element;

package/es/EditableTable/EditableCell.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { message } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { PREFIX_CLS } from '../constants';
+import Icons from '../Icons';
+export default function EditableCell(props) {
+  var focused = props.focused,
+      onFocus = props.onFocus,
+      children = props.children,
+      disableUpDown = props.disableUpDown,
+      disableLeftRight = props.disableLeftRight,
+      errors = props.errors,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? true : _props$bordered;
+  var disabled = get(children, 'props.disabled');
+  return /*#__PURE__*/React.createElement("div", {
+    onFocus: onFocus,
+    "data-up-down": disableUpDown ? '0' : '1',
+    "data-left-right": disableLeftRight ? '0' : '1',
+    className: classNames("".concat(PREFIX_CLS, "-form-item"), {
+      'ant-input': focused >= 1 && bordered,
+      'ant-input-focused': focused >= 2 && bordered,
+      'ant-input-disabled': disabled
+    })
+  }, children, errors !== undefined ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX_CLS, "-form-item-error"),
+    onClick: function onClick() {
+      return message.warning(errors.join('\n'));
+    },
+    onFocus: function onFocus(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(Icons.Tip, {
+    type: "warning"
+  })) : null);
+}

package/es/EditableTable/EditableTableFormItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItemProps } from 'antd';
+import { EditableTableProps } from './typings';
+declare type Props<T> = Pick<FormItemProps, 'name' | 'label' | 'labelCol' | 'wrapperCol' | 'className' | 'required' | 'style' | 'colon'> & EditableTableProps<T>;
+export default function EditableTableFormItem<T>(props: Props<T>): JSX.Element;
+export {};

package/es/EditableTable/EditableTableFormItem.js

@@ -0,0 +1,49 @@
+var _excluded = ["name", "label", "labelCol", "wrapperCol", "className", "required", "style", "colon"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useRef } from 'react';
+import { Form } from 'antd';
+import Table from './Table';
+export default function EditableTableFormItem(props) {
+  var name = props.name,
+      label = props.label,
+      labelCol = props.labelCol,
+      wrapperCol = props.wrapperCol,
+      className = props.className,
+      required = props.required,
+      style = props.style,
+      colon = props.colon,
+      tableProps = _objectWithoutProperties(props, _excluded);
+
+  var ref = useRef(null);
+  return /*#__PURE__*/React.createElement(Form.Item, {
+    name: name,
+    noStyle: true,
+    label: label,
+    labelCol: labelCol,
+    wrapperCol: wrapperCol,
+    className: className,
+    required: required,
+    style: style,
+    colon: colon,
+    validateTrigger: [],
+    rules: [{
+      validator: function validator() {
+        if (ref.current) {
+          return ref.current.validate();
+        }
+
+        return;
+      }
+    }]
+  }, /*#__PURE__*/React.createElement(Table, _objectSpread({}, tableProps)));
+}

package/es/EditableTable/Table.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+import { EditableTableProps, EditableTableRef } from './typings';
+declare type RefType = ((instance: EditableTableRef | null) => void) | MutableRefObject<EditableTableRef | null> | null;
+declare const _default: <T>(props: EditableTableProps<T> & {
+    ref?: RefType | undefined;
+}) => JSX.Element;
+export default _default;