ydb-ui-components 2.0.2 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.3.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.2.0...v2.3.0) (2022-07-18)
+
+
+### Features
+
+* **i18n:** add configure function ([c48e58e](https://github.com/ydb-platform/ydb-ui-components/commit/c48e58e33e361cf4f507190cd0a8d0a896975fb1))
+
+## [2.2.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.1.0...v2.2.0) (2022-07-05)
+
+
+### Features
+
+* **NavigationTree:** add index and index_table node types! ([d6ed6ba](https://github.com/ydb-platform/ydb-ui-components/commit/d6ed6bae7e882a6217d4205f931ac3704b8ed9f6))
+
+## [2.1.0](https://github.com/ydb-platform/ydb-ui-components/compare/v2.0.2...v2.1.0) (2022-06-28)
+
+
+### Features
+
+* **NavigationTree:** explicitly specify expandable nodes ([1791d59](https://github.com/ydb-platform/ydb-ui-components/commit/1791d59d4ed5b27050fdbd9c29500c4fe916f631))
+
 ### [2.0.2](https://github.com/ydb-platform/ydb-ui-components/compare/v2.0.1...v2.0.2) (2022-05-30)
 
 

package/README.md

@@ -1 +1,31 @@
 # ydb-ui-components
+
+A set of React components used in YDB interfaces.
+
+## Install
+
+```shell
+npm install --save-dev ydb-ui-components @yandex-cloud/uikit @yandex-cloud/i18n @yandex-cloud/browserslist-config
+```
+
+## I18N
+
+Some components contain prepared text. For changing language use `configure` function.
+
+**index.js**
+
+```js
+import {configure} from 'ydb-ui-components';
+
+configure({
+  lang: 'en',
+});
+```
+
+## Development
+
+To start the dev storybook
+
+```shell
+npm run start
+```

package/build/components/NavigationTree/NavigationTree.js

@@ -15,12 +15,6 @@ var _NavigationTreeDirectory = require("./NavigationTreeDirectory");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 NavigationTree(_ref) {
   let {
     rootState: partialRootState,
@@ -32,7 +26,7 @@ function NavigationTree(_ref) {
   } = _ref;
 
   const [state, dispatch] = _react.default.useReducer(_state.reducer, {
-    [partialRootState.path]: _objectSpread(_objectSpread({}, (0, _state.getDefaultNodeState)()), partialRootState)
+    [partialRootState.path]: (0, _state.getNodeState)(partialRootState)
   });
 
   const rootState = state[partialRootState.path];

package/build/components/NavigationTree/NavigationTreeDirectory.js

@@ -76,7 +76,7 @@ function NavigationTreeDirectory(_ref) {
       const childPath = `${path}/${childName}`;
       let children;
 
-      if (state[childPath].type === 'directory') {
+      if (state[childPath].expandable) {
         children = /*#__PURE__*/_react.default.createElement(NavigationTreeDirectory, {
           state: state,
           dispatch: dispatch,

package/build/components/NavigationTree/NavigationTreeNode.js

@@ -29,6 +29,7 @@ function renderIcon(type, collapsed) {
       });
 
     case 'directory':
+    case 'index':
       return collapsed ? /*#__PURE__*/_react.default.createElement(_Folder.FolderIcon, {
         height: 14
       }) : /*#__PURE__*/_react.default.createElement(_FolderOpen.FolderOpenIcon, {
@@ -36,6 +37,7 @@ function renderIcon(type, collapsed) {
       });
 
     case 'table':
+    case 'index_table':
       return /*#__PURE__*/_react.default.createElement(_Table.TableIcon, {
         height: 14
       });
@@ -45,10 +47,6 @@ function renderIcon(type, collapsed) {
   }
 }
 
-function isArrowVisible(type) {
-  return type === 'database' || type === 'directory';
-}
-
 function NavigationTreeNode(_ref) {
   let {
     path,
@@ -86,7 +84,7 @@ function NavigationTreeNode(_ref) {
     collapsed: nodeState.collapsed,
     active: active,
     actions: actions,
-    hasArrow: isArrowVisible(nodeState.type),
+    hasArrow: nodeState.expandable,
     onClick: handleClick,
     onArrowClick: handleArrowClick
   }, children);

package/build/components/NavigationTree/i18n/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _i18n = require("../../i18n");
 
+var _utils = require("../../../utils");
+
 var _en = _interopRequireDefault(require("./en.json"));
 
 var _ru = _interopRequireDefault(require("./ru.json"));
@@ -15,9 +17,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const COMPONENT = 'ydb-navigation-tree';
 
-_i18n.i18n.registerKeyset('en', COMPONENT, _en.default);
+_i18n.i18n.registerKeyset(_utils.Lang.En, COMPONENT, _en.default);
 
-_i18n.i18n.registerKeyset('ru', COMPONENT, _ru.default);
+_i18n.i18n.registerKeyset(_utils.Lang.Ru, COMPONENT, _ru.default);
 
 var _default = _i18n.i18n.keyset(COMPONENT);
 

package/build/components/NavigationTree/state.d.ts

@@ -1,4 +1,4 @@
-import { NavigationTreeState } from './types';
+import { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState } from './types';
 export declare enum NavigationTreeActionType {
     ToggleCollapsed = "toggle-collapsed",
     StartLoading = "start-loading",
@@ -15,4 +15,5 @@ export declare function getDefaultNodeState(): {
     error: boolean;
     children: never[];
 };
+export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
 export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;

package/build/components/NavigationTree/state.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationTreeActionType = void 0;
 exports.getDefaultNodeState = getDefaultNodeState;
+exports.getNodeState = getNodeState;
 exports.reducer = reducer;
 
 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; }
@@ -32,6 +33,12 @@ function getDefaultNodeState() {
   };
 }
 
+function getNodeState(partialState) {
+  return _objectSpread(_objectSpread({}, getDefaultNodeState()), {}, {
+    expandable: partialState.type === 'database' || partialState.type === 'directory'
+  }, partialState);
+}
+
 function reducer() {
   let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let action = arguments.length > 1 ? arguments[1] : undefined;
@@ -75,21 +82,17 @@ function reducer() {
           for (const item of action.payload.data) {
             var _state$path$collapsed, _state$path;
 
-            const path = `${action.payload.path}/${item.name}`;
-            const name = item.name;
-            const type = item.type; // expand the tree according to the active path
+            const path = `${action.payload.path}/${item.name}`; // expand the tree according to the active path
             // prioritize the existing state to expand the tree only on first load
 
             const {
               activePath = ''
             } = action.payload;
             const collapsed = (_state$path$collapsed = (_state$path = state[path]) === null || _state$path === void 0 ? void 0 : _state$path.collapsed) !== null && _state$path$collapsed !== void 0 ? _state$path$collapsed : !activePath.startsWith(`${path}/`);
-            newState[path] = _objectSpread(_objectSpread({}, getDefaultNodeState()), {}, {
+            newState[path] = getNodeState(_objectSpread(_objectSpread({}, item), {}, {
               collapsed,
-              path,
-              name,
-              type
-            });
+              path
+            }));
           }
         }
 

package/build/components/NavigationTree/types.d.ts

@@ -1,8 +1,10 @@
 import { DropdownMenuItemMixed } from '@yandex-cloud/uikit';
-export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table';
+export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table' | 'index_table' | 'index';
 export interface NavigationTreeDataItem {
     name: string;
     type: NavigationTreeNodeType;
+    /** determined by type by default */
+    expandable?: boolean;
 }
 export interface NavigationTreeState {
     [path: string]: NavigationTreeNodeState;
@@ -11,14 +13,17 @@ export interface NavigationTreeNodeState {
     path: string;
     name: string;
     type: NavigationTreeNodeType;
+    /** determined by type by default */
+    expandable?: boolean;
     collapsed: boolean;
     loading: boolean;
     loaded: boolean;
     error: boolean;
     children: string[];
 }
+export declare type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
 export interface NavigationTreeProps<D = any> {
-    rootState: Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+    rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
     getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
     activePath?: string;

package/build/components/i18n.d.ts

@@ -1,3 +1,2 @@
 import { I18N } from '@yandex-cloud/i18n';
 export declare const i18n: I18N;
-export { I18N } from '@yandex-cloud/i18n';

package/build/components/i18n.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "I18N", {
-  enumerable: true,
-  get: function () {
-    return _i18n.I18N;
-  }
-});
 exports.i18n = void 0;
 
 var _i18n = require("@yandex-cloud/i18n");
 
+var _configure = require("../utils/configure");
+
 const i18n = new _i18n.I18N();
-exports.i18n = i18n;
+exports.i18n = i18n;
+i18n.setLang((0, _configure.getConfig)().lang || _configure.Lang.En);
+(0, _configure.subscribeConfigure)(config => {
+  if (config.lang) {
+    i18n.setLang(config.lang);
+  }
+});

package/build/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/NavigationTree';
 export * from './components/TreeView';
 export { i18n } from './components/i18n';
+export * from './utils';

package/build/index.js

@@ -41,4 +41,18 @@ Object.keys(_TreeView).forEach(function (key) {
   });
 });
 
-var _i18n = require("./components/i18n");
+var _i18n = require("./components/i18n");
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/build/utils/configure.d.ts

@@ -0,0 +1,12 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+interface Config {
+    lang?: Lang;
+}
+declare type Subscriber = (config: Config) => void;
+export declare const configure: (newConfig: Config) => void;
+export declare const subscribeConfigure: (sub: Subscriber) => () => void;
+export declare const getConfig: () => Config;
+export {};

package/build/utils/configure.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeConfigure = exports.getConfig = exports.configure = exports.Lang = void 0;
+let Lang;
+exports.Lang = Lang;
+
+(function (Lang) {
+  Lang["Ru"] = "ru";
+  Lang["En"] = "en";
+})(Lang || (exports.Lang = Lang = {}));
+
+let subs = [];
+const config = {};
+
+const configure = newConfig => {
+  Object.assign(config, newConfig);
+  subs.forEach(sub => {
+    sub(config);
+  });
+};
+
+exports.configure = configure;
+
+const subscribeConfigure = sub => {
+  subs.push(sub);
+  return () => {
+    subs = subs.filter(item => item !== sub);
+  };
+};
+
+exports.subscribeConfigure = subscribeConfigure;
+
+const getConfig = () => config;
+
+exports.getConfig = getConfig;

package/build/utils/index.d.ts

@@ -0,0 +1 @@
+export { configure, Lang } from './configure';

package/build/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Lang", {
+  enumerable: true,
+  get: function () {
+    return _configure.Lang;
+  }
+});
+Object.defineProperty(exports, "configure", {
+  enumerable: true,
+  get: function () {
+    return _configure.configure;
+  }
+});
+
+var _configure = require("./configure");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "2.0.2",
+  "version": "2.3.0",
   "description": "",
   "license": "MIT",
   "main": "build/index.js",