@kdcloudjs/kdesign 1.0.2

package/lib/filter/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/filter/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.less");
+
+require("./index.less");

package/lib/filter/style/index.less

@@ -0,0 +1,263 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@filter-prefix-cls: ~'@{kd-prefix}-filter';
+@filter-header-prefix-cls: ~'@{kd-prefix}-filter-header';
+@filter-body-prefix-cls: ~'@{kd-prefix}-filter-body';
+
+.@{filter-prefix-cls} {
+  .@{filter-header-prefix-cls} {
+    z-index: 1;
+    display: flex;
+    position: relative;
+    align-items: flex-end;
+    padding: 9px 124px 9px 0;
+
+    &-title {
+      white-space: nowrap;
+      color: @primary-text-color;
+      font-size: @large-font-size;
+    }
+
+    &-condition {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: flex-end;
+      margin: 0 8px 0 40px;
+
+      &-label {
+        padding-right: 8px;
+        font-size: @font-size;
+        white-space: nowrap;
+        color: @third-text-color;
+      }
+
+      &-item-text {
+        max-width: 224px;
+        .ellipsis;
+      }
+    }
+
+    &-search {
+      min-width: 200px;
+    }
+
+    &-handle {
+      .reset-component;
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      width: 100px;
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      color: @ongoing-color;
+      font-size: @font-size;
+      cursor: pointer;
+      user-select: none;
+      border: 1px solid transparent;
+      border-bottom: none;
+
+      > i {
+        transition: transform .2s linear
+      }
+
+      &.spread {
+        border-radius: 4px 4px 0 0;
+        background-color: @contain-bg;
+        border-color: @strong-border-color;
+
+        > i {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  .@{filter-body-prefix-cls} {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+
+    &.spread {
+      height: auto;
+      overflow: visible;
+      padding: 8px 20px;
+      border-radius: 4px 0 4px 4px;
+      background-color: @contain-bg;
+      border: 1px solid @strong-border-color;
+    }
+
+    &-tabs {
+      border-bottom: 1px solid @weak-border-color;
+
+      &-item {
+        padding: 10px 0;
+        font-size: @font-size;
+        color: @third-text-color;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          color: @ongoing-color;
+        }
+      }
+
+      &-split {
+        width: 1px;
+        height: 16px;
+        background-color: @strong-border-color;
+      }
+    }
+
+    &-conditions {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+    
+    &-condition {
+      display: flex;
+      font-size: @small-font-size;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid @weak-border-color;
+      }
+
+      &-label {
+        padding: 11px 0 10px;
+        color: @third-text-color;
+        line-height: 18px;
+      }
+
+      &-options {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        flex: 1;
+        max-height: 64px;
+        margin-left: 24px;
+        padding: 8px 0 4px;
+        overflow: auto;
+      }
+
+      &-option {
+        margin-bottom: 4px;
+        padding: 0 12px;
+        color: @secondary-text-color;
+        vertical-align: middle;
+        line-height: 22px;
+        font-size: @small-font-size;
+        border-radius: @radius-size;
+        border: 1px solid transparent;
+        cursor: pointer;
+        white-space: nowrap;
+
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        &.active {
+          color: @ongoing-color;
+          border-color: @ongoing-color;
+          background-color: @bg;
+        }
+
+        &-customer {
+          margin-left: -20px;
+        }
+      }
+
+      &-addition {
+        margin-left: 24px;
+        line-height: 40px;
+      }
+    }
+
+    &-scheme {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+
+      > li {
+        position: relative;
+        display: flex;
+        line-height: 40px;
+      }
+
+      &-label {
+        width: 96px;
+        color: @third-text-color;
+        font-size: @small-font-size;
+      }
+
+      &-list {
+        display: flex;
+      }
+
+      &-item {
+        font-size: @small-font-size;
+        color: @secondary-text-color;
+        cursor: pointer;
+
+        &:not(:last-child) {
+          margin-right: 48px;
+        }
+
+        &.active {
+          color: @ongoing-color;
+        }
+      }
+
+      &-action {
+        position: absolute;
+        right: 0;
+      }
+
+      &-detail {
+        > li {
+          line-height: 40px;
+          color: @primary-text-color;
+          font-size: @small-font-size;
+
+          > span {
+            display: inline-block;
+
+            &:not(:last-child) {
+              margin-right: 12px;
+            }
+          }
+        }
+
+        &-field {
+          width: 100px;
+        }
+
+        &-operator {
+          width: 140px;
+        }
+
+        &-value {
+          width: 220px;
+        }
+
+        &-and {
+          font-size: @font-size;
+        }
+
+        &-delete {
+          color: @disabled-color;
+          font-size: @xxlarge-font-size;
+          cursor: pointer;
+
+          &:hover {
+            color: @error-color;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/form/Field.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NamePath, LabelAlign, Rule } from './interface';
+export interface FormItemProps {
+    children?: React.ReactNode;
+    className?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    label?: string | number;
+    labelWidth?: string | number;
+    labelAlign?: LabelAlign;
+    name: NamePath;
+    prefixCls?: string;
+    required?: boolean;
+    rules?: Rule[];
+    validateTrigger?: string | string[];
+    wrapperWidth?: string | number;
+}
+declare const Field: React.FC<FormItemProps>;
+export default Field;

package/lib/form/Field.js

@@ -0,0 +1,295 @@
+"use strict";
+
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _configProvider = require("../config-provider");
+
+var _FieldLabel = _interopRequireDefault(require("./FieldLabel"));
+
+var _FieldWrapper = _interopRequireDefault(require("./FieldWrapper"));
+
+var _useForceUpdate = _interopRequireDefault(require("./hooks/useForceUpdate"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var _FieldContext = _interopRequireDefault(require("./FieldContext"));
+
+var _useForm = require("./hooks/useForm");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var DEFAULT_TRIGGER = 'onChange';
+
+var generateEventHandler = function generateEventHandler(handler, validateTrigger) {
+  var eventHandler = {};
+
+  if (validateTrigger) {
+    if (typeof validateTrigger === 'string' && validateTrigger !== 'onChange') {
+      eventHandler[validateTrigger] = handler;
+    } else if (Array.isArray(validateTrigger)) {
+      validateTrigger.forEach(function (evt) {
+        if (evt !== 'onChange') {
+          eventHandler[evt] = handler;
+        }
+      });
+    }
+  }
+
+  return eventHandler;
+};
+
+var Field = function Field(props) {
+  var _classnames, _context;
+
+  (0, _devwarning.default)(! /*#__PURE__*/_react.default.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
+  (0, _devwarning.default)(!props.name, 'Form.Item', 'Form.Item must have a name');
+
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var fieldContext = _react.default.useContext(_FieldContext.default);
+
+  var forceUpdate = (0, _useForceUpdate.default)();
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      fieldValue = _useState2[0],
+      setFieldValue = _useState2[1];
+
+  var getFieldValue = fieldContext.getFieldValue,
+      getFieldError = fieldContext.getFieldError,
+      getInternalHooks = fieldContext.getInternalHooks,
+      vertical = fieldContext.vertical,
+      getDefaultValue = fieldContext.getDefaultValue;
+
+  var _getInternalHooks = getInternalHooks(_useForm.INTERNAL_HOOK_KEY),
+      registerField = _getInternalHooks.registerField,
+      dispatch = _getInternalHooks.dispatch,
+      setDefaultValues = _getInternalHooks.setDefaultValues;
+
+  var name = props.name,
+      children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      customizePrefixcls = props.prefixCls,
+      hidden = props.hidden,
+      label = props.label,
+      labelWidth = props.labelWidth,
+      labelAlign = props.labelAlign,
+      required = props.required,
+      _props$rules = props.rules,
+      rules = _props$rules === void 0 ? [] : _props$rules,
+      wrapperWidth = props.wrapperWidth,
+      validateTrigger = props.validateTrigger,
+      defaultValue = props.defaultValue;
+
+  var onStoreChange = function onStoreChange(stores, _namePathList, source) {
+    var prev = stores.prev,
+        curr = stores.curr;
+    var prevValue = (0, _get.default)(prev, name);
+    var currValue = (0, _get.default)(curr, name);
+    var isValueUpdated = prevValue !== currValue && source === 'updateValue';
+    var isExternalAction = source === 'externalUpdateValue';
+    var isValidatedFinish = source === 'validateFinish';
+    var isReset = source === 'reset';
+
+    if (isValueUpdated || isExternalAction || isValidatedFinish || isReset) {
+      forceUpdate();
+    }
+  };
+
+  var rulesRequired = rules.some(function (rule) {
+    if (rule && (0, _typeof2.default)(rule) === 'object' && rule.required) {
+      return true;
+    }
+
+    if (typeof rule === 'function') {
+      var ruleEntity = rule(fieldContext);
+      return ruleEntity && ruleEntity.required;
+    }
+
+    return false;
+  });
+  var mergedRequired = required || !!rulesRequired;
+
+  if (rules.length === 0 && required) {
+    rules.push({
+      required: true
+    });
+  }
+
+  var mergeRules = rules;
+
+  if (Array.isArray(mergeRules) && mergeRules.length) {
+    mergeRules = (0, _map.default)(rules).call(rules, function (r) {
+      if (typeof r === 'function') {
+        return r(fieldContext);
+      }
+
+      return r;
+    });
+  }
+
+  var itemRef = _react.default.useRef({
+    onStoreChange: onStoreChange,
+    meta: {
+      rules: mergeRules,
+      name: name,
+      trigger: validateTrigger
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    registerField(name, itemRef.current);
+
+    if (defaultValue !== undefined) {
+      setDefaultValues((0, _defineProperty2.default)({}, name, defaultValue));
+    }
+  }, [name, registerField]);
+  var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
+  var formItemClassName = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field"), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
+  var value = getFieldValue(name);
+  var validateMessage = getFieldError(name);
+
+  var handleValueChange = _react.default.useCallback(function (evt) {
+    var _a;
+
+    var inputValue = typeof evt === 'string' ? evt : (_a = evt.target) === null || _a === void 0 ? void 0 : _a.value;
+    dispatch({
+      type: 'updateValue',
+      namePath: name,
+      value: inputValue
+    });
+  }, [name]);
+
+  var handleValueValidate = _react.default.useCallback(function () {
+    dispatch({
+      type: 'validateField',
+      namePath: name
+    });
+  }, [name]);
+
+  var trigger = (0, _extends3.default)((0, _defineProperty2.default)({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
+
+  var mergeProps = function mergeProps(fa, ch) {
+    if (!ch) {
+      return {};
+    }
+
+    var faChange = fa.onChange,
+        faDisabled = fa.disabled,
+        rest = __rest(fa, ["onChange", "disabled"]);
+
+    var _ch$props = ch.props,
+        chChange = _ch$props.onChange,
+        chValue = _ch$props.value,
+        chDisabled = _ch$props.disabled,
+        chDefaultValue = _ch$props.defaultValue;
+
+    var onChange = function onChange(evt) {
+      if (chValue === undefined) {
+        if (typeof evt === 'string') {
+          setFieldValue(evt);
+        } else {
+          setFieldValue(evt.target.value);
+        }
+      }
+
+      if (typeof faChange === 'function') {
+        faChange(evt);
+      }
+
+      if (typeof chChange === 'function') {
+        chChange(evt);
+      }
+    };
+
+    var mergeValue = chValue === undefined ? value : chValue;
+
+    if (mergeValue !== fieldValue) {
+      setFieldValue(mergeValue);
+    }
+
+    if (getDefaultValue(name) === undefined && (chDefaultValue !== undefined || chValue !== undefined)) {
+      setDefaultValues((0, _defineProperty2.default)({}, name, chValue !== undefined ? chValue : chDefaultValue));
+      forceUpdate();
+    }
+
+    return (0, _extends3.default)((0, _extends3.default)({}, rest), {
+      onChange: onChange,
+      defaultValue: defaultValue,
+      value: fieldValue,
+      disabled: chDisabled || faDisabled
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: formItemClassName
+  }, /*#__PURE__*/_react.default.createElement(_FieldLabel.default, {
+    value: label,
+    width: labelWidth,
+    textAlign: labelAlign,
+    requiredMark: mergedRequired
+  }), /*#__PURE__*/_react.default.createElement(_FieldWrapper.default, {
+    width: wrapperWidth,
+    validateMessage: validateMessage
+  }, (0, _map.default)(_context = (0, _reactChildren.toArray)(children)).call(_context, function (child, index) {
+    var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({
+      disabled: disabled,
+      value: value
+    }, trigger), {
+      key: index
+    }), child);
+    return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;
+  })));
+};
+
+var _default = Field;
+exports.default = _default;

package/lib/form/FieldContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InternalFormInstance } from './interface';
+declare const context: React.Context<InternalFormInstance>;
+export default context;

package/lib/form/FieldContext.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var warningFunc = function warningFunc() {
+  (0, _devwarning.default)(false, 'Form', 'Can not find FormContext. Please make sure you wrap Field under Form.');
+};
+
+var context = /*#__PURE__*/_react.default.createContext({
+  getFieldError: warningFunc,
+  getFieldsError: warningFunc,
+  getFieldsValue: warningFunc,
+  getDefaultValue: warningFunc,
+  getFieldValue: warningFunc,
+  resetFields: warningFunc,
+  setFieldsValue: warningFunc,
+  setFieldValue: warningFunc,
+  submit: warningFunc,
+  validateFields: warningFunc,
+  getInternalHooks: function getInternalHooks() {
+    warningFunc();
+    return {
+      dispatch: warningFunc,
+      setDefaultValues: warningFunc,
+      registerField: warningFunc,
+      setCallbacks: warningFunc
+    };
+  }
+});
+
+var _default = context;
+exports.default = _default;

package/lib/form/FieldLabel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LabelAlign } from './interface';
+export interface FieldLabelProps {
+    value?: string | number;
+    width?: string | number;
+    textAlign?: LabelAlign;
+    prefixCls?: string;
+    requiredMark?: boolean;
+}
+declare const FieldLabel: React.FC<FieldLabelProps>;
+export default FieldLabel;