@arco-design/mobile-react 2.26.0 → 2.27.1

package/esm/index-bar/type.d.ts

@@ -0,0 +1,195 @@
+import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import { StickyRef } from '../sticky';
+import { BaseRef } from '../_helpers';
+export declare type IndexBarIndexType = string | number;
+export interface IndexBarBaseData {
+    /**
+     * 内容
+     * @en content
+     */
+    content: ReactNode;
+}
+interface IndexBarGroupItem<Data extends IndexBarBaseData> {
+    /**
+     * IndexBarGroup对应的索引
+     * @en Index corresponding to IndexBarGroup
+     */
+    index: IndexBarIndexType;
+    /**
+     * IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效
+     * @en The list data to be rendered in IndexBarGroup, if the children attribute has been passed, the list attribute will not take effect
+     */
+    list?: Data[];
+}
+export declare type IndexBarTipType = 'none' | 'sweat' | 'toast';
+export declare type IndexBarChangeTrigger = 'swipe' | 'manual' | 'sidebar';
+export interface IndexBarScrollParams {
+    index: IndexBarIndexType;
+    type: IndexBarChangeTrigger;
+    rightNow?: boolean;
+}
+export interface IndexBarSideBarProps {
+    tipType: IndexBarTipType;
+    indexes: IndexBarIndexType[];
+    prefixCls?: string;
+    onTouching: (isTouching: boolean) => void;
+    onClick: (index: IndexBarIndexType) => void;
+    activeIndex?: IndexBarIndexType;
+    renderSideBarItem?: (index: IndexBarIndexType) => ReactNode;
+    renderSideBar?: (Content: ReactNode) => ReactElement;
+    renderTip?: (index: IndexBarIndexType) => ReactNode;
+}
+export interface IndexBarGroupProps<Data extends IndexBarBaseData> extends IndexBarGroupItem<Data> {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义内容的渲染，有自定义内容优先渲染自定义内容，否则渲染list传递的数据
+     * @en Rendering of custom content, if there is custom content, the custom content is rendered first, otherwise the data passed by the list is rendered
+     */
+    children?: ReactNode;
+    /**
+     * 自定义提取List的key作为列表渲染的key，默认选取listItem的所在数组位置
+     * @en Customize the extracted key of the List as the key for list rendering, and select the array position where the listItem is located by default
+     */
+    listKey?: (data: Data, listItemIndex: number) => IndexBarIndexType;
+    /**
+     * IndexBar.Group中某个子项被点击时的回调
+     * @en Callback when a child item in IndexBar.Group is clicked
+     */
+    onGroupItemClick?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => void;
+    /**
+     * 自定义IndexBar.Group的索引标题内容渲染
+     * @en Customize IndexBar.Group's index title content rendering
+     */
+    renderStickyItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的子项内容渲染
+     * @en Customize the rendering of sub-items of IndexBar.Group
+     */
+    renderGroupItem?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => ReactNode;
+}
+export interface IndexBarGroupRef extends BaseRef {
+}
+export interface IndexBarProps<Data extends IndexBarBaseData> {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 默认要激活的索引
+     * @en Index to activate by default
+     */
+    defaultIndex?: IndexBarIndexType;
+    /**
+     * 是否开启侧边栏功能
+     * @en Whether to enable the sidebar function
+     * @default false
+     */
+    disableSidebar?: boolean;
+    /**
+     * 是否开启索引的自动吸顶效果
+     * @en Whether to enable the automatic ceiling effect of the index
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * 索引栏内容
+     * @en IndexBar contents
+     */
+    groups?: IndexBarGroupItem<Data>[];
+    /**
+     * 自定义内容的渲染，内容必须是IndexBar.Group组件
+     * @en Rendering of custom content, the content must be an IndexBar.Group component
+     */
+    children?: ReactNode;
+    /**
+     * 侧边栏索引提示的样式类型 - sweat 水滴形 - toast 轻提示 - none 关闭提示
+     * @en Style type of sidebar index hint - sweat: teardrop - toast: light hint - none: turn off hint
+     * @default "toast"
+     */
+    tipType?: IndexBarTipType;
+    /**
+     * 手动调用scrollToIndex时，滚动动画的执行时间
+     * @en Execution time of scrolling animation when scrollToIndex is called manually
+     * @default 0
+     */
+    scrollDuration?: number;
+    /**
+     * 手动调用scrollToIndex时，滚动的动画曲线
+     * @en When scrollToIndex is called manually, the scrolling animation curve
+     */
+    scrollBezier?: [number, number, number, number];
+    /**
+     * 激活的索引改变时的回调，第一个参数是新的索引，第二个参数是改变方式：- swipe 手动滑动页面触发变化 - sidebar 侧边栏点击触发变化 - manual 手动调用scrollToIndex触发
+     * @en Callback when the active index changes, the first parameter is the new index, and the second parameter is the change method: - swipe: triggers the change by manually sliding the page - sidebar: triggers the change by clicking on the sidebar - manual: triggers by manually calling scrollToIndex
+     */
+    onChange?: (index: IndexBarIndexType, trigger: IndexBarChangeTrigger) => void;
+    /**
+     * IndexBar.Group中某个子项被点击时的回调，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en The callback when a sub-item in IndexBar.Group is clicked, the callback will not take effect when using JSX writing, please bind the corresponding property on IndexBar.Group
+     */
+    onGroupItemClick?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => void;
+    /**
+     * 自定义侧边栏每个子项的内容渲染
+     * @en Customize the content rendering of each sub-item in the sidebar
+     */
+    renderSideBarItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义侧边栏渲染
+     * @en Custom sidebar rendering
+     */
+    renderSideBar?: (Content: ReactNode) => ReactElement;
+    /**
+     * 自定义使用侧边栏改变索引时，渲染提示的内容
+     * @en Customize the content of the rendering prompt when changing the index using the sidebar
+     */
+    renderTip?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的索引标题内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en Customize the rendering of the index title content of IndexBar.Group. When using JSX writing, the callback will not take effect. Please bind the corresponding property on IndexBar.Group
+     */
+    renderStickyItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的子项内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en Customize the rendering of sub-items of IndexBar.Group. This callback will not take effect when using JSX. Please bind the corresponding properties on IndexBar.Group
+     */
+    renderGroupItem?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => ReactNode;
+}
+export interface IndexBarRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 手动滚动到指定的索引位置
+     * @en Manually scroll to the specified index position
+     */
+    scrollToIndex: (index?: IndexBarIndexType, rightNow?: boolean) => void;
+    /**
+     * 局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置
+     * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
+     */
+    recalculatePosition: (index?: IndexBarIndexType) => void;
+}
+export interface IndexBarContext {
+    sticky: boolean;
+    getScrollContainer: () => HTMLDivElement | null;
+    activeIndex?: IndexBarIndexType;
+    updateRef: (index: IndexBarIndexType, ref: StickyRef) => void;
+}
+export {};

package/esm/index-bar/type.js

@@ -0,0 +1 @@
+export {};

package/esm/index-bar/utils.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+import { IndexBarIndexType } from './type';
+export declare function filterValidIndexBarChild(children: ReactNode): ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[];
+export declare function getFormatIndex(index: IndexBarIndexType, activeIndex: IndexBarIndexType | undefined): string | number;
+export declare function isValidIndex(index: unknown): index is IndexBarIndexType;
+export declare function getGroupDomFromIndex(containerDom: HTMLDivElement, activeIndex: IndexBarIndexType): HTMLDivElement | null;

package/esm/index-bar/utils.js

@@ -0,0 +1,53 @@
+import { Children, isValidElement } from 'react';
+import { IndexBarGroup } from './group';
+export function filterValidIndexBarChild(children) {
+  var validChildren = [];
+  Children.forEach(children, function (child) {
+    if (! /*#__PURE__*/isValidElement(child) || child.type !== IndexBarGroup) {
+      console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
+      return;
+    }
+
+    validChildren.push(child);
+  });
+  return validChildren;
+} // index有可能是number或者string，但是绑在data-index的attr上后
+// 通过滑动事件得到的都是string，需要处理下
+
+export function getFormatIndex(index, activeIndex) {
+  var activeIndexType = typeof activeIndex;
+  var indexType = typeof index;
+
+  if (indexType === activeIndexType) {
+    return index;
+  }
+
+  if (activeIndexType === 'number') {
+    return Number(index);
+  }
+
+  return index.toString();
+}
+export function isValidIndex(index) {
+  return typeof index === 'number' || typeof index === 'string';
+}
+export function getGroupDomFromIndex(containerDom, activeIndex) {
+  var targetDom = null;
+  var containerChildren = containerDom.children;
+
+  for (var i = 0; i < containerChildren.length; i++) {
+    var dom = containerChildren[i];
+    var dataset = dom == null ? void 0 : dom.dataset;
+
+    if (dataset && dataset.index) {
+      var formatIndex = getFormatIndex(dataset.index, activeIndex);
+
+      if (formatIndex === activeIndex) {
+        targetDom = dom;
+        break;
+      }
+    }
+  }
+
+  return targetDom;
+}

package/esm/index.d.ts

@@ -26,6 +26,8 @@ export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
 export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
+export { default as IndexBar } from './index-bar';
+export { default as Keyboard } from './keyboard';
 export { default as LoadMore } from './load-more';
 export { default as Loading } from './loading';
 export { default as Masking } from './masking';

package/esm/index.js

@@ -26,6 +26,8 @@ export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
 export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
+export { default as IndexBar } from './index-bar';
+export { default as Keyboard } from './keyboard';
 export { default as LoadMore } from './load-more';
 export { default as Loading } from './loading';
 export { default as Masking } from './masking';

package/esm/keyboard/demo/style/css/mobile.css

@@ -0,0 +1,4 @@
+#demo-keyboard .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}

package/esm/keyboard/demo/style/mobile.less

@@ -0,0 +1,8 @@
+@import "../../../../style/mixin.less";
+
+#demo-keyboard {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+}

package/esm/keyboard/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { KeyboardProps, KeyboardRef } from './type';
+export * from './type';
+/**
+ * 数字键盘组件
+ * @en Keyboard component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 数字键盘
+ * @name_en Keyboard
+ */
+declare const Keyboard: React.ForwardRefExoticComponent<KeyboardProps & React.RefAttributes<KeyboardRef>>;
+export default Keyboard;

package/esm/keyboard/index.js

@@ -0,0 +1,243 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["normalKeyClass", "normalKeyStyle", "className", "style", "type", "randomOrder", "title", "rightColumns", "confirmClosable", "confirmButton", "deleteButton", "keyboardButton", "close", "onConfirm", "onDelete", "onChange"];
+import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle, useMemo, useCallback, useEffect, useContext } from 'react';
+import { GlobalContext } from '../context-provider';
+import { IconKeyboard, IconKeyboardDelete } from '../icon';
+import Popup from '../popup';
+export * from './type'; // 键盘乱序
+// @en let keyboard random
+
+var makeArrayRandom = function makeArrayRandom(targetArray) {
+  var randomFn = function randomFn() {
+    return Math.random() - 0.5;
+  };
+
+  return targetArray.sort(randomFn);
+};
+
+var splitArray = function splitArray(target) {
+  return target.reduce(function (acc, cur) {
+    if (!acc[acc.length - 1] || acc[acc.length - 1].length >= 3) {
+      acc.push([]);
+    }
+
+    acc[acc.length - 1].push(cur);
+    return acc;
+  }, []);
+}; // 纯数字类字符
+// @en Pure numeric characters
+
+
+var contentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+/**
+ * 数字键盘组件
+ * @en Keyboard component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 数字键盘
+ * @name_en Keyboard
+ */
+
+var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
+  var normalKeyClass = props.normalKeyClass,
+      normalKeyStyle = props.normalKeyStyle,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'number' : _props$type,
+      _props$randomOrder = props.randomOrder,
+      randomOrder = _props$randomOrder === void 0 ? false : _props$randomOrder,
+      title = props.title,
+      rightColumns = props.rightColumns,
+      confirmClosable = props.confirmClosable,
+      confirmButton = props.confirmButton,
+      deleteButton = props.deleteButton,
+      keyboardButton = props.keyboardButton,
+      close = props.close,
+      onConfirm = props.onConfirm,
+      onDelete = props.onDelete,
+      onChange = props.onChange,
+      resetProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var popupRef = useRef(null);
+  var keyboardRef = useRef(null);
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls,
+      _useContext$locale = _useContext.locale,
+      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
+
+  var prefix = prefixCls + "-keyboard"; // 3x4键盘的按键内容
+  // @en 3x4 Keyboard button content
+
+  var displayData = useMemo(function () {
+    var numberArr = randomOrder ? makeArrayRandom(contentArray) : contentArray;
+    var lastNum = numberArr.slice(-1)[0];
+    var finalData = splitArray(numberArr.slice(0, -1));
+
+    switch (type) {
+      case 'confirm':
+        finalData.push([lastNum, '.']);
+        break;
+
+      case 'tool':
+        finalData.push(['.', lastNum, {
+          type: 'delete'
+        }]);
+        break;
+
+      case 'number':
+      default:
+        finalData.push([{
+          type: 'keyboard'
+        }, lastNum, {
+          type: 'delete'
+        }]);
+        break;
+    }
+
+    return finalData;
+  }, [type]); // 右边一列
+  // @en Right column
+
+  var rightColumn = useMemo(function () {
+    switch (type) {
+      case 'number':
+        return [];
+
+      case 'confirm':
+        {
+          return [{
+            type: 'delete'
+          }];
+        }
+
+      case 'tool':
+        return ['+', '-', '×', '÷'];
+
+      default:
+        return [];
+    }
+  }, [type]); // 确认按钮需要在type为confirm时展示
+  // @en Display then confirm button when type is confirm
+
+  var getConfirmButton = useCallback(function () {
+    if (type !== 'confirm') {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        confirmClosable && close();
+        onConfirm == null ? void 0 : onConfirm();
+      },
+      className: cls(prefix + "-key", prefix + "-key-confirm")
+    }, confirmButton || locale.Keyboard.confirm);
+  }, [type]); // 点击空白处关闭键盘
+  // @en Close keyboard when clicked the blank space
+
+  useEffect(function () {
+    var handlerDocumentClick = function handlerDocumentClick(e) {
+      if (!keyboardRef.current) {
+        return;
+      }
+
+      if (!keyboardRef.current.contains(e.target) && e.target !== keyboardRef.current) {
+        close();
+      }
+    };
+
+    document.addEventListener('click', handlerDocumentClick);
+    return function () {
+      document.removeEventListener('click', handlerDocumentClick);
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return _extends({
+      keyboard: keyboardRef.current
+    }, popupRef.current);
+  });
+
+  var handleButtonClick = function handleButtonClick(ele) {
+    switch (ele.type) {
+      case 'delete':
+        onDelete == null ? void 0 : onDelete();
+        break;
+
+      case 'keyboard':
+        close();
+        break;
+
+      default:
+        onChange == null ? void 0 : onChange(ele.value);
+    }
+  };
+
+  var renderButtonContent = function renderButtonContent(ele) {
+    switch (ele.type) {
+      case 'delete':
+        return deleteButton || /*#__PURE__*/React.createElement(IconKeyboardDelete, null);
+
+      case 'keyboard':
+        return keyboardButton || /*#__PURE__*/React.createElement(IconKeyboard, null);
+
+      default:
+        return ele.content;
+    }
+  };
+
+  var renderButton = function renderButton(data, key, extraClass) {
+    var ele = typeof data === 'string' || typeof data === 'number' ? {
+      type: 'content',
+      content: data,
+      value: data
+    } : data;
+    return /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return handleButtonClick(ele);
+      },
+      className: cls(prefix + "-key", normalKeyClass, extraClass),
+      key: key,
+      style: normalKeyStyle
+    }, renderButtonContent(ele));
+  };
+
+  var renderKeyboardRightColumns = function renderKeyboardRightColumns() {
+    if (rightColumns) {
+      return rightColumns;
+    }
+
+    return rightColumn.length > 0 ? /*#__PURE__*/React.createElement("div", {
+      className: prefix + "-col"
+    }, rightColumn.map(function (item, index) {
+      return renderButton(item, String(index));
+    }), getConfirmButton()) : null;
+  };
+
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    ref: popupRef,
+    maskClass: prefix + "-popup",
+    close: close
+  }, resetProps), /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix, "" + className),
+    style: style,
+    ref: keyboardRef
+  }, title, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-key-wrapper"
+  }, displayData.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix + "-row",
+      key: index
+    }, item.map(function (e, idx) {
+      var _renderButton;
+
+      return renderButton(e, String(idx), (_renderButton = {}, _renderButton[prefix + "-key-special"] = type === 'confirm' && index === displayData.length - 1 && idx === 0, _renderButton));
+    }));
+  })), renderKeyboardRightColumns())));
+});
+export default Keyboard;

package/esm/keyboard/style/css/index.css

@@ -0,0 +1,93 @@
+.arco-keyboard {
+  background:  #f2f3f5 ;
+  padding:  0.16rem ;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-keyboard-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-keyboard-key-wrapper {
+  -webkit-box-flex: 2;
+  -webkit-flex: 2 0 auto;
+          flex: 2 0 auto;
+}
+.arco-keyboard-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
+  margin-bottom:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key-special {
+  -webkit-box-flex: 2.1;
+  -webkit-flex: 2.1 0 auto;
+          flex: 2.1 0 auto;
+}
+.arco-keyboard-col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
+  margin-top:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key-confirm {
+  -webkit-box-flex: 2.5;
+  -webkit-flex: 2.5 0 auto;
+          flex: 2.5 0 auto;
+  background:  #165dff ;
+  color:  #ffffff ;
+  font-size:  0.36rem ;
+}
+.arco-keyboard-key {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  font-weight:  500 ;
+  font-size:  0.44rem ;
+  line-height:  0.6rem ;
+  background:  #ffffff ;
+  height:  0.96rem ;
+  border-radius:  0.08rem ;
+  color:  #1d2129 ;
+}
+.arco-keyboard-key:active {
+  background:  #e5e6eb ;
+}
+.arco-keyboard-key .arco-icon {
+  font-size:  0.52rem ;
+}
+.arco-keyboard-popup {
+  display: none;
+}

package/esm/keyboard/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../popup/style/css';
+import './index.css';

package/esm/keyboard/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../popup/style/css';
+import './index.css';

package/esm/keyboard/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../popup/style';
+import './index.less';

package/esm/keyboard/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../popup/style';
+import './index.less';