change object keys & UpperCase & LowerCase

[xgqfrms]

change object keys & UpperCase & LowerCase

.toLocaleUpperCase(); && .toLocaleLowerCase();

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2018.12.24
 * @modified 2018.12.24
 *
 * @description Utils & ChangeObjectKeys
 * @augments
 * @example ChangeObjectKeys(tab_datas, tab_keys);
 * @example shapeArrayTabs(new_outputs, outputs);
 *
 */

const shapeArrayTabs = (new_outputs = [], outputs = []) => {
    let result = [];
    new_outputs.forEach(
        (obj, i) => {
            let {
                tab_keys,
            } = obj;
            let {
                tab_name,
                tab_datas,
            } = outputs[i];
            let temp = {
                tab_name,
            };
            temp["tab_datas"] = ChangeObjectKeys(tab_datas, tab_keys);
            result.push(temp);
        }
    );
    return result;
};

const ChangeObjectKeys = (tab_datas = [], tab_keys = []) => {
    let result = [];
    tab_datas.forEach(
        (obj, i) => {
            let {
                key,
            } = obj;
            let keys = Object.keys(obj);
            let temp = {
                key,
            };
            tab_keys.forEach(
                (item, i) => {
                    let UpperKey = item.toLocaleUpperCase();
                    if (keys.includes(UpperKey)) {
                        temp[item] = obj[UpperKey];
                    }
                }
            );
            result.push(temp);
        }
    );
    return result;
};

const ResultUtils = {
    shapeArrayTabs,
    ChangeObjectKeys,
};

export default ResultUtils;

export {
    shapeArrayTabs,
    ChangeObjectKeys,
};

[xgqfrms]

demo

let new_outputs =
[
   {
       "title": "",
       "tab_values": {
           "TradingDay": "日期",
           "ListedSector": "板块",
           "ClosePrice": "收价",
           "NoChangeCount": "暂无注释",
       },
       "tab_keys": [
           "TradingDay",
           "ListedSector",
           "ClosePrice",
           "NoChangeCount",
       ]
   }
];

let outputs =
[
    {
        "tab_name": "smart.dailychecked.industry",
        "tab_datas": [
            {
                "key": "RT_key 00001",
                "TRADINGDAY": "2018-12-21",
                "CLOSEPRICE": "7.0",
                "NOCHANGECOUNT": "0.0"
            },
            {
                "key": "RT_key 00002",
                "TRADINGDAY": "2018-12-21",
                "CLOSEPRICE": "5.1",
                "NOCHANGECOUNT": "0.0"
            },
            {
                "key": "RT_key 00003",
                "TRADINGDAY": "2018-12-21",
                "CLOSEPRICE": "23.6",
                "NOCHANGECOUNT": "0.0"
            },
        ]
    }
];

let tab_datas = [
    {
        "key": "RT_key 00001",
        "TRADINGDAY": "2018-12-21",
        "CLOSEPRICE": "7.0",
        "NOCHANGECOUNT": "0.0",
    },
    {
        "key": "RT_key 00002",
        "TRADINGDAY": "2018-12-21",
        "CLOSEPRICE": "5.1",
        "NOCHANGECOUNT": "0.0",
    },
    {
        "key": "RT_key 00003",
        "TRADINGDAY": "2018-12-21",
        "CLOSEPRICE": "23.6",
        "NOCHANGECOUNT": "0.0",
    },
];

let tab_keys = [
    "TradingDay",
    "ListedSector",
    "ClosePrice",
    "NoChangeCount",
];

ChangeObjectKeys(tab_datas, tab_keys);

shapeArrayTabs(new_outputs, outputs);

[xgqfrms]

[xgqfrms]

shit antd

how to add tooltip for table's title?

https://stackoverflow.com/questions/13845003/tooltips-for-cells-in-html-table-no-javascript https://jsfiddle.net/BioData41/yxr64euy/

https://tooltips.org/add-tooltips-for-table/

solutions ???

new version

new version is OK, old version is Error

https://codesandbox.io/s/1yxxoqxq1l

old version

new version is OK, old version is Error

// testing

    tabs_cols.forEach(
        (obj, i) => {
            let {
                title,
                key,
                dataIndex,
            } = obj;
            let temp = {
                "key": key,
                "dataIndex": dataIndex,
                // "title": `${title}`,
                // "title": `${title}\n(${key})`,
                // "data-tooltips": `${title} (${key})`,
                // new version is OK, old version is Error
                // title: () => {
                //     console.log(`title =`, title);
                //     console.log(`key =`, key);
                //     return (
                //         <Tooltip title="xxx">title</Tooltip>
                //     );
                // },
                // title: () => {
                //     console.log(`title =`, title);
                //     console.log(`key =`, key);
                //     return (
                //         <Tooltip title={key}>{title}</Tooltip>
                //     );
                // },
                "className": "test-result",
                // "title": `<span>${title}(${key})</span>`,
                // "title": () => <Tooltip title={key}>{title}</Tooltip>,
                // title: () => <Tooltip title={key}>{title}</Tooltip>,
                // title: this.render(() => <Tooltip title={key}>{title}</Tooltip>),
            };
            // console.log(`temp =\n`, temp);
            // return temp;
            new_table_cols.push(temp);
            // multi cols bug! 
            keys.push(key);
            titles.push(title);
            // keys.add(key);
            // titles.add(title);
        }
    );

shit bug

https://zhuanlan.zhihu.com/p/53214213

[xgqfrms]

React & event.persist()

event.persist()

https://reactjs.org/docs/events.html#event-pooling

React & Hooks

https://reactjs.org/docs/hooks-reference.html#useref

[xgqfrms]

tooltips & click copy

shit antd

https://codesandbox.io/s/zx4wo7y56l

https://ant.design/components/tooltip-cn/

[xgqfrms]

https://codesandbox.io

https://codesandbox.io/dashboard https://codesandbox.io/dashboard/recent

https://codesandbox.io/s/vue https://codesandbox.io/s/github/nuxt/codesandbox-nuxt

https://codesandbox.io/s/new https://codesandbox.io/s/github/zeit/next.js/tree/master/examples/hello-world

https://codesandbox.io/s/moy0qloymj https://codesandbox.io/s/nrjvy2844m

[xgqfrms]

h_ui

https://www.npmjs.com/~hs_ui

https://www.npmjs.com/package/h_ui_beta https://www.npmjs.com/package/h_ui

https://github.com/hundsun-ui/h_ui

github

天下文章一大抄

http://www.hsweb.me/

https://github.com/hs-web/hsweb-ui-vue

https://github.com/hs-web https://github.com/orgs/hs-web/people

---

https://developer.here.com/

https://www.npmjs.com/package/h-ui https://github.com/hudk114/h-ui

http://www.h-ui.net/aboutHui.shtml https://github.com/jackying/h-ui

[xgqfrms]

yarn

global add & add -D

https://yarnpkg.com/zh-Hans/docs/cli/add#toc-commands

---

$ yarn global add <package...>

$ yarn add <package...> [--dev/-D]

[xgqfrms]

vue & 组件化应用构建

https://scrimba.com/p/pXKqta/cEQVkA3

https://cn.vuejs.org/v2/guide/#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BA%94%E7%94%A8%E6%9E%84%E5%BB%BA

https://cn.vuejs.org/v2/guide/components.html

https://cn.vuejs.org/v2/guide/single-file-components.html

[xgqfrms]

antd-RangePicker-datepicker

placeholder

placeholder	非范围选择时的占位内容	string	—
placeholder	placeholder of date input	string|RangePicker[]

https://ant.design/components/date-picker/

https://codesandbox.io/s/92yzp7028o

element date-picker

https://element.eleme.io/#/zh-CN/component/date-picker

placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—

[xgqfrms]

old vue & scss

https://vue-loader.vuejs.org/guide/pre-processors.html#sass

sass-loader for scss

[xgqfrms]

https://scrimba.com/playlist/RRAIO https://scrimba.com/playlist/Redux%20React