React & calendar components

[xgqfrms]

React & calendar components

https://codesandbox.io/s/xo99j9m1pw https://codepen.io/webgeeker/pen/eQqqEe

[xgqfrms]

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

[xgqfrms]

React & click

https://reactjs.org/docs/handling-events.html

---

http://derpturkey.com/react-pass-value-with-onclick/ https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd

[xgqfrms]

https://github.com/facebook/create-react-app https://ant.design/components/calendar-cn/

[xgqfrms]

https://codesandbox.io/s/9n13zry4y https://codesandbox.io/s/xo99j9m1pw

[xgqfrms]

OK

https://facebook.github.io/create-react-app/docs/getting-started

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import 'antd/dist/antd.css';
import { Calendar, Alert, Badge } from 'antd';
import moment from 'moment';

function onPanelChange(value, mode) {
    // "year"
    // "month"
    // Moment{}
    console.log(`value = `, value);
    console.log(`mode = `, mode);
}

// let value = moment("2018-12-12");

// console.log(`moment value = `, value);

function onSelect(value) {
    // console.log(`value = `, value);
}

function onClickItem(value) {
    // e.preventDefault();
    // console.log(`item value = \n`, value);
    // console.log(`item value.target = \n`, value.target);
    // console.log(`item value.target.dataset.uid = \n`, value.target.parent.dataset.uid);
    console.log(`item value.target.parentElement.dataset.uid = \n`, value.target.parentElement.dataset.uid);
}

function getListData(value) {
    let listData;
    switch (value.date()) {
        case 8:
            listData = [
                { type: "warning", content: "This is warning event." },
                { type: "success", content: "This is usual event." }
            ];
            break;
        case 10:
            listData = [
                { type: "warning", content: "This is warning event." },
                { type: "success", content: "This is usual event." },
                { type: "error", content: "This is error event." }
            ];
            break;
        case 15:
            listData = [
                { type: "warning", content: "This is warning event" },
                {
                    type: "success",
                    content: "This is very long usual event。。...."
                },
                { type: "error", content: "This is error event 1." },
                { type: "error", content: "This is error event 2." },
                { type: "error", content: "This is error event 3." },
                { type: "error", content: "This is error event 4." }
            ];
            break;
        default:
    }
    return listData || [];
}

function dateCellRender(value) {
    const listData = getListData(value);
    return (
        <ul className="events">
            {listData.map(item => (
                <li
                    onClick={onClickItem}
                    key={item.content}>
                    <Badge
                        data-uid={item.content}
                        status={item.type}
                        text={item.content} />
                </li>
            ))}
        </ul>
    );
}

function getMonthData(value) {
    if (value.month() === 8) {
        return 1394;
    }
}

function monthCellRender(value) {
    const num = getMonthData(value);
    return num ? (
        <div className="notes-month">
            <section>{num}</section>
            <span>Backlog number</span>
        </div>
    ) : null;
}

class App extends Component {
    constructor(props) {
        super();
        this.state = {
          value: moment('2017-01-25'),
          selectedValue: moment('2017-01-25'),
        };
        // this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return (
            <div className="App">
                {/* <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                </header> */}
                <Calendar
                    onSelect={onSelect}
                    onPanelChange={onPanelChange}
                    dateCellRender={dateCellRender}
                    monthCellRender={monthCellRender}
                />
            </div>
        );
    }
}

export default App;

[xgqfrms]

bug

https://gitter.im/ant-design/ant-design

https://files.gitter.im/ant-design/ant-design/IPHC/image.png

[xgqfrms]

solutions

https://codesandbox.io/s/wy1kn8oo9k

https://codesandbox.io/s/6lx5p1937r

[xgqfrms]

ts bug

index.tsx

https://codesandbox.io/s/8886vmy710

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button } from "antd";

@log
class Test extends React.Component {
    render() {
        return (
            <div>
                <Button>Primary</Button>
                <Button type="primary">Primary</Button>
            </div>
        );
    }
}

function log(Target: any) {
    console.log(Target);
}

ReactDOM.render(<Test />, document.getElementById("container"));

export default Test;

[xgqfrms]

https://codesandbox.io/s/pmw4xn3pom

[xgqfrms]

OK

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Divider, Tag, Tooltip } from "antd";

const columns = [
    {
        title: "Name",
        dataIndex: "name",
        key: "name",
        render: text => <a href="javascript:;">{text}</a>
    },
    // {
    //     title: "Age",
    //     dataIndex: "age",
    //     key: "age",
    //     render: text => <Tooltip title="xxxx">{text}</Tooltip>
    // },
    {
        title: "Address",
        dataIndex: "address",
        key: "address"
    },
    {
        title: () => <Tooltip title="xxxx">Tags</Tooltip>,
        key: "tags",
        dataIndex: "tags",
        render: tags => (
            <span>
                {tags.map(tag => (
                    <Tag color="blue" key={tag}>
                        {tag}
                    </Tag>
                ))}
            </span>
        )
    },
    {
        title: () => (
            <span>
                <a href="javascript:;">link</a>
            </span>
        ),
        key: "action",
        render: (text, record) => (
            <span>
                <a href="javascript:;">Invite {record.name}</a>
                <Divider type="vertical" />
                <a href="javascript:;">Delete</a>
            </span>
        )
    }
];

let obj = {
    title: () => <Tooltip title="Age">Age</Tooltip>,
    dataIndex: "age",
    key: "age",
    render: text => <Tooltip title="Age">{text}</Tooltip>
};

columns.push(obj);

const data = [
    {
        key: "1",
        name: "John",
        age: 32,
        address: "New York No.1",
        tags: ["nice", "developer"]
    }
];

ReactDOM.render(
    <div>
        <Table columns={columns} dataSource={data} />
    </div>,
    document.getElementById("container")
);

bug

    let new_table_cols = [];
    tabs_cols.forEach(
        (obj, i) => {
            let {
                title,
                key,
                dataIndex,
            } = obj;
            let temp = {
                "key": key,
                "dataIndex": dataIndex,
                "title": `${title} (${key})`,
                // "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);
        }
    );

[xgqfrms]

ES6 Map MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

let mySet = new Set();

mySet.add(1); 
// Set [ 1 ]

mySet.add(5); 
// Set [ 1, 5 ]

mySet.add(5);
 // Set [ 1, 5 ]

mySet.add('some text');
// Set [ 1, 5, 'some text' ]

ES6 Set & Map

OK

const arr = [
    "INNERCODE", "SECUCODE", "SECUABBR", "TRADINGDAY", "LASTWEEKTRADINGDAY", "CLOSEPRICE", "CHANGE", "CHANGERANGE",
    "INNERCODE", "SECUCODE", "SECUABBR", "TRADINGDAY", "LASTWEEKTRADINGDAY", "CLOSEPRICE", "CHANGE", "CHANGERANGE",
];

let map_arr = new Map(arr);
// VM17757:1 Uncaught TypeError: Iterator value INNERCODE is not an entry object at new Map (<anonymous>)

let set_arr = new Set(arr);
// Set(8) {"INNERCODE", "SECUCODE", "SECUABBR", "TRADINGDAY", "LASTWEEKTRADINGDAY", …}

let new_arr = [...set_arr];
// (8) ["INNERCODE", "SECUCODE", "SECUABBR", "TRADINGDAY", "LASTWEEKTRADINGDAY", "CLOSEPRICE", "CHANGE", "CHANGERANGE"]

[xgqfrms]

React 16.x & Hooks

Hooks

https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-overview.html

React 16.x

https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

https://discuss.reactjs.org/ https://dev.to/t/react https://reactjs.org/docs/hooks-intro.html https://reactjs.org/community/support.html