@kdcloudjs/kdesign 1.0.2

package/es/split-panel/style/index.less

@@ -0,0 +1,192 @@
+
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@split-prefix-cls: ~'@{kd-prefix}-split';
+@split-panel-padding-base: @split-panel-trigger-line-width / 2;
+
+.@{split-prefix-cls} {
+    &-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 1px solid @split-panel-trigger-border-color;
+        overflow: hidden;
+    }
+    &-panel {
+        position: absolute;
+        overflow: hidden;
+        transition: all calc(@transition-duration - 0.1s) @ease-out;
+        &.left-panel, &.right-panel {
+            top: 0;
+            bottom: 0;
+        }
+        &.left-panel {
+            left: 0;
+            margin-right: @split-panel-padding-base;
+        }
+        &.right-panel {
+            right: 0;
+            margin-left: @split-panel-padding-base;
+        }
+        &.top-panel, &.bottom-panel {
+            left: 0;
+            right: 0;
+        }
+        &.top-panel {
+            top: 0;
+            margin-bottom: @split-panel-padding-base;
+        }
+        &.bottom-panel {
+            bottom: 0;
+            margin-top: @split-panel-padding-base;
+        }
+        &-moving {
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+        }
+    }
+    &-trigger {
+        &-con {
+          position: absolute;
+          transform: translate(-50%, -50%);
+          z-index: 10;
+          transition: all calc(@transition-duration - 0.1s) @ease-out;
+          &.is-active {
+            .@{split-prefix-cls}-trigger-arrow {
+              border-color: @split-panel-trigger-border-color;
+              background: @split-panel-trigger-border-color;
+              color: white;
+            }
+          }
+          &.can-drag{
+            .@{split-prefix-cls}-trigger-vertical {
+              cursor: col-resize;
+            }
+            .@{split-prefix-cls}-trigger-horizontal {
+              cursor: row-resize;
+            }
+          }
+          &.is-disabled{
+            .@{split-prefix-cls}-trigger-vertical {
+              cursor: not-allowed;
+            }
+          }
+          &:not(.is-disabled) {
+            &:hover{
+              .@{split-prefix-cls}-trigger-arrow {
+                border-color: @split-panel-trigger-border-color;
+              }
+            }
+            .@{split-prefix-cls}-trigger-arrow:hover {
+              cursor: pointer;
+              background: #fff !important;
+              color: @split-panel-trigger-arrow-hover-color !important;
+              border-color: @split-panel-trigger-arrow-hover-color !important;
+            }
+          }
+        }
+        &-arrow {
+          position: absolute;
+          color: @split-panel-trigger-arrow-color;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          transition: all calc(@transition-duration - 0.1s) @ease-out;
+          .@{kd-prefix}icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 12px;
+            height: 12px;
+            font-size: 12px;
+          }
+          &.is-vertical {
+              width: 12px;
+              height: 16px;
+              top: 50%;
+              transform: translate(0, -50%);
+              .@{kd-prefix}icon {
+                height: 12px;
+                // position: absolute;
+                // top: 50%;
+                // transform: translate(0, -50%);
+              }
+          }
+          &.is-horizontal {
+              width: 16px;
+              height: 12px;
+              left: 50%;
+              transform: translate(-50%, 0);
+              .@{kd-prefix}icon {
+                width: 12px;
+                // position: absolute;
+                // left: 50%;
+                // transform: translate(-50%, 0);
+              }
+          }
+          &.top {
+            bottom: 100%;
+            border: 1px solid transparent;
+            border-bottom: none;
+            border-radius: 10px 10px 0 0;
+          }
+          &.bottom {
+            top: 100%;
+            border: 1px solid transparent;
+            border-top: none;
+            border-radius: 0 0 10px 10px;
+          }
+          &.left {
+            right: 100%;
+            border: 1px solid transparent;
+            border-right: none;
+            border-radius: 10px 0 0 10px;
+          }
+          &.right {
+            left: 100%;
+            border: 1px solid transparent;
+            border-left: none;
+            border-radius: 0 10px 10px 0;
+          }
+        }
+        &-vertical {
+          width: @split-panel-trigger-line-width;
+          height: 100%;
+          background: @split-panel-trigger-line-color;
+          border-top: none;
+          border-bottom: none;
+        }
+        &-horizontal {
+          height: @split-panel-trigger-line-width;
+          width: 100%;
+          background: @split-panel-trigger-line-color;
+          border-left: none;
+          border-right: none;
+        }
+        &.is-disabled{
+          cursor: not-allowed;
+        }
+    }
+    &-horizontal {
+        > .@{split-prefix-cls}-trigger-con {
+            top: 50%;
+            height: 100%;
+        }
+    }
+    &-vertical {
+        > .@{split-prefix-cls}-trigger-con {
+            left: 50%;
+            width: 100%;
+        }
+    }
+    .no-select {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+}

package/es/split-panel/trigger.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SplitPanelMode, FoldDirection } from './interface';
+interface TriggerProps {
+    prefixCls: string;
+    style?: React.CSSProperties;
+    mode: SplitPanelMode;
+    disabled?: boolean;
+    showFoldIcons: boolean;
+    foldIcons?: React.ReactNode[];
+    hideFirstPanel: (e: React.MouseEvent, direction: FoldDirection) => void;
+    hideSecondPanel: (e: React.MouseEvent, direction: FoldDirection) => void;
+    handleMousedown: (e: React.MouseEvent) => void;
+}
+declare const _default: React.NamedExoticComponent<TriggerProps>;
+export default _default;

package/es/split-panel/trigger.js

@@ -0,0 +1,65 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import React from 'react';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+var Trigger = function Trigger(props) {
+  var prefixCls = props.prefixCls,
+      style = props.style,
+      mode = props.mode,
+      disabled = props.disabled,
+      showFoldIcons = props.showFoldIcons,
+      foldIcons = props.foldIcons,
+      hideFirstPanel = props.hideFirstPanel,
+      hideSecondPanel = props.hideSecondPanel,
+      handleMousedown = props.handleMousedown;
+  var triggerPrefixCls = "".concat(prefixCls, "-trigger");
+  var isVertical = mode === 'vertical';
+
+  var getCustomFoldIcons = function getCustomFoldIcons(index) {
+    return foldIcons && foldIcons[index];
+  };
+
+  var triggerCls = classNames(triggerPrefixCls, isVertical ? "".concat(triggerPrefixCls, "-vertical") : "".concat(triggerPrefixCls, "-horizontal"), _defineProperty({}, "is-disabled", disabled));
+
+  var getArrowCls = function getArrowCls(cls) {
+    return classNames("".concat(triggerPrefixCls, "-arrow"), isVertical ? "is-vertical" : "is-horizontal", cls);
+  };
+
+  var firstCustomIcons = getCustomFoldIcons(0);
+  var secondCustomIcons = getCustomFoldIcons(1);
+
+  var renderFoldIcons = function renderFoldIcons() {
+    if (!showFoldIcons) {
+      return null;
+    }
+
+    var firstIconPos = isVertical ? 'left' : 'top';
+    var secondIconPos = isVertical ? 'right' : 'bottom';
+    var firstIconType = isVertical ? 'arrow-left-solid' : 'arrow-up-solid';
+    var secondIconType = isVertical ? 'arrow-right-solid' : 'arrow-down-solid';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: getArrowCls(firstIconPos),
+      onClick: function onClick(e) {
+        return hideFirstPanel(e, firstIconPos);
+      }
+    }, firstCustomIcons || /*#__PURE__*/React.createElement(Icon, {
+      type: firstIconType
+    })), /*#__PURE__*/React.createElement("span", {
+      className: getArrowCls(secondIconPos),
+      onClick: function onClick(e) {
+        return hideSecondPanel(e, secondIconPos);
+      }
+    }, secondCustomIcons || /*#__PURE__*/React.createElement(Icon, {
+      type: secondIconType
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: triggerCls,
+    style: style,
+    onMouseDown: handleMousedown
+  }), renderFoldIcons());
+};
+
+export default /*#__PURE__*/React.memo(Trigger);

package/es/stepper/index.d.ts

@@ -0,0 +1,3 @@
+import Stepper from './stepper';
+export * from './stepper';
+export default Stepper;

package/es/stepper/index.js

@@ -0,0 +1,3 @@
+import Stepper from './stepper';
+export * from './stepper';
+export default Stepper;

package/es/stepper/stepper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputNumberProps } from '../input-number';
+export declare const StepTypes: ["embed", "base"];
+export declare type StepType = typeof StepTypes[number];
+export interface StepperProps extends InputNumberProps {
+    type?: StepType;
+    step?: number;
+    stepBtnClassName?: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<unknown>>;
+export default Stepper;

package/es/stepper/stepper.js

@@ -0,0 +1,221 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useContext, useRef, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import Big from 'big.js';
+import InputNumber from '../input-number';
+import Icon from '../icon';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import devWarning from '../_utils/devwarning';
+import { tuple } from '../_utils/type';
+import { omit } from '../_utils/omit';
+import { useMergedState } from '../_utils/hooks';
+export var StepTypes = tuple('embed', 'base');
+
+var InternalStepper = function InternalStepper(props, ref) {
+  var _useContext = useContext(ConfigContext),
+      userDefaultProps = _useContext.compDefaultProps,
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var inputNumberProps = getCompProps('Stepper', userDefaultProps, props);
+  var customPrefixcls = inputNumberProps.prefixCls,
+      onChange = inputNumberProps.onChange,
+      step = inputNumberProps.step,
+      type = inputNumberProps.type,
+      stepBtnClassName = inputNumberProps.stepBtnClassName,
+      max = inputNumberProps.max,
+      min = inputNumberProps.min,
+      propsValue = inputNumberProps.value,
+      defaultValue = inputNumberProps.defaultValue;
+  var inputPrefixCls = getPrefixCls(prefixCls, 'inputNumber', customPrefixcls);
+  devWarning(typeof step !== 'number', 'stepper', "step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
+  var thisInputNumberRef = useRef();
+  var stepperrref = useRef();
+  var inputNumberRef = ref || thisInputNumberRef;
+  var stepMouseDownDelayTimer = useRef(null);
+  var stepMouseDownIntervalTimer = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMinusdisabled = _useState2[0],
+      setMinusdisabled = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showPlusdisabled = _useState4[0],
+      setPlusdisabled = _useState4[1];
+
+  var _useMergedState = useMergedState(undefined, {
+    value: propsValue,
+    defaultValue: defaultValue
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      value = _useMergedState2[0],
+      setValue = _useMergedState2[1]; // class
+
+
+  var getStepBtnClassNames = function getStepBtnClassNames(stepType, btnType) {
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _classNames;
+
+    var isDisabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    return classNames((_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-")).call(_context, stepType, "Step"), true), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(inputPrefixCls, "-")).call(_context2, stepType, "Step-disabled"), isDisabled), _defineProperty(_classNames, _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(inputPrefixCls, "-")).call(_context4, stepType, "Step-")).call(_context3, btnType), btnType), _defineProperty(_classNames, _concatInstanceProperty(_context5 = "".concat(inputPrefixCls, "-")).call(_context5, stepType, "Step-small"), inputNumberProps.size === 'small'), _defineProperty(_classNames, _concatInstanceProperty(_context6 = "".concat(inputPrefixCls, "-")).call(_context6, stepType, "Step-middle"), inputNumberProps.size === 'middle'), _defineProperty(_classNames, _concatInstanceProperty(_context7 = "".concat(inputPrefixCls, "-")).call(_context7, stepType, "Step-large"), inputNumberProps.size === 'large'), _defineProperty(_classNames, stepBtnClassName, stepType === 'base' && stepBtnClassName), _classNames));
+  };
+
+  var getStepPrefix = function getStepPrefix() {
+    if (type === 'embed') {
+      return null;
+    }
+
+    var decreaseClassName = getStepBtnClassNames('base', 'decrease', showPlusdisabled);
+    return /*#__PURE__*/React.createElement("span", {
+      className: decreaseClassName,
+      onMouseDown: function onMouseDown() {
+        handleStepMouseDown('minus');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(inputPrefixCls, "-icon"),
+      type: "reduce"
+    }));
+  };
+
+  var getStepSuffix = function getStepSuffix() {
+    var increaseClassName = getStepBtnClassNames('base', 'increase', showMinusdisabled);
+    return type === 'embed' ? getEmbedStepView() : /*#__PURE__*/React.createElement("span", {
+      className: increaseClassName,
+      onMouseDown: function onMouseDown() {
+        handleStepMouseDown('plus');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(inputPrefixCls, "-icon"),
+      type: "add"
+    }));
+  };
+
+  var handleStepChang = function handleStepChang(type) {
+    var stepNum = parseFloat(step);
+
+    if (typeof stepNum !== 'number') {
+      return false;
+    }
+
+    var startingNumber = parseFloat(stepperrref.current.value) || parseFloat(inputNumberProps.min) || 0;
+    var calculationResults = new Big(startingNumber)[type](stepNum).valueOf();
+    var legalNumber = stepperrref.current.verifiValue(calculationResults);
+
+    if (legalNumber === false) {
+      return false;
+    }
+
+    if (typeof max === 'number') {
+      if (Number(legalNumber) + step > max) {
+        setMinusdisabled(true);
+      } else {
+        setMinusdisabled(false);
+      }
+
+      if (Number(legalNumber) > max) {
+        return false;
+      }
+    }
+
+    if (typeof min === 'number') {
+      if (Number(legalNumber) - step < min) {
+        setPlusdisabled(true);
+      } else {
+        setPlusdisabled(false);
+      }
+
+      if (Number(legalNumber) < min) {
+        return false;
+      }
+    } // props?.value === undefined && stepperrref.current.setValue(legalNumber)
+
+
+    (props === null || props === void 0 ? void 0 : props.value) === undefined && setValue(legalNumber);
+    onChange && onChange({
+      target: {
+        value: legalNumber
+      }
+    });
+  };
+
+  var setpLongPress = function setpLongPress(type) {
+    stepMouseDownIntervalTimer.current = setInterval(function () {
+      handleStepChang(type);
+    }, 300);
+  };
+
+  var handleStepMouseDown = function handleStepMouseDown(type) {
+    handleStepChang(type);
+    stepMouseDownDelayTimer.current = setTimeout(function () {
+      setpLongPress(type);
+    }, 300);
+    document.addEventListener('mouseup', clearAllTimer, true);
+    return false;
+  };
+
+  var handleChange = function handleChange(event) {
+    var _a;
+
+    var number = parseFloat(event.target.value);
+
+    if (String(value).length && ((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.length) >= String(value).length && event.target.value !== '' && (props === null || props === void 0 ? void 0 : props.value) !== undefined && (max && max < number || min && min > number)) {
+      return;
+    }
+
+    (props === null || props === void 0 ? void 0 : props.value) === undefined && setValue(event.target.value);
+    (props === null || props === void 0 ? void 0 : props.value) === undefined && stepperrref.current.setValue(event.target.value);
+    onChange && onChange(event);
+  };
+
+  var clearAllTimer = useCallback(function () {
+    stepMouseDownDelayTimer.current && clearTimeout(stepMouseDownDelayTimer.current);
+    stepMouseDownIntervalTimer.current && clearInterval(stepMouseDownIntervalTimer.current);
+    document.removeEventListener('mouseup', clearAllTimer);
+    return false;
+  }, [stepMouseDownDelayTimer, stepMouseDownIntervalTimer]);
+
+  var getEmbedStepView = function getEmbedStepView() {
+    var _classNames2, _classNames3;
+
+    var embedStepClassName = getStepBtnClassNames('embed');
+    var plusClassName = classNames("".concat(inputPrefixCls, "-embedStep-plus"), (_classNames2 = {}, _defineProperty(_classNames2, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-embedStep-disabled"), showMinusdisabled), _classNames2));
+    var minusClassName = classNames("".concat(inputPrefixCls, "-embedStep-minus"), (_classNames3 = {}, _defineProperty(_classNames3, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames3, "".concat(inputPrefixCls, "-embedStep-disabled"), showPlusdisabled), _classNames3));
+    return /*#__PURE__*/React.createElement("span", {
+      className: embedStepClassName
+    }, /*#__PURE__*/React.createElement("span", {
+      className: plusClassName,
+      onMouseDown: function onMouseDown() {
+        handleStepMouseDown('plus');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(inputPrefixCls, "-icon"),
+      type: "arrow-up"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: minusClassName,
+      onMouseDown: function onMouseDown() {
+        handleStepMouseDown('minus');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(inputPrefixCls, "-icon"),
+      type: "arrow-down"
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement(InputNumber, _extends({}, omit(inputNumberProps, ['step', 'type', 'stepBtnClassName', 'value', 'defaultValue']), {
+    ref: inputNumberRef,
+    stepperrref: stepperrref,
+    value: value,
+    prefix: getStepPrefix(),
+    suffix: getStepSuffix(),
+    onChange: handleChange
+  }));
+};
+
+var Stepper = /*#__PURE__*/React.forwardRef(InternalStepper);
+Stepper.displayName = 'Stepper';
+export default Stepper;

package/es/stepper/style/css.js

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