Skip to content

K
kus-admin
Commit 564fe70e by Иван Кубота
Options

pass children to constructors. remake Switch

parents c54a1739 021531f9
Showing with 338 additions and 335 deletions
index.js
......@@ -75,7 +75,7 @@ var transformJSX = function(code, fileName, cb) {
}
} );
};
/*
var transformTSX = function(code, fileName, cb) {
bCore.transform(
`import "main.ts";const x:number = 4;
......@@ -88,11 +88,11 @@ var transformTSX = function(code, fileName, cb) {
isTSX: true,
jsxPragma: 'D'
}],
/*[ "@babel/plugin-transform-react-jsx", {
/!*[ "@babel/plugin-transform-react-jsx", {
"pragma": "D.h", // default pragma is React.createElement
"pragmaFrag": "D.f", // default is React.Fragment
"throwIfNamespace": false // defaults to true
} ],*/
} ],*!/
[simpleTransformToAMD]
],
sourceMaps: 'both',
......@@ -110,8 +110,8 @@ var transformTSX = function(code, fileName, cb) {
cb(false, d);
}
} );
};
transformTSX('', 'aga', ()=>{})
};*/
//transformTSX('', 'aga', ()=>{})
var sass = require('node-sass');
var transformServe = function(dir) {
return function (req, res, next) {
......@@ -181,7 +181,7 @@ var transformServe = function(dir) {
})
}
});
}else if (req.url.substr(-4) === '.tsx' || req.url.substr(-3) === '.ts') {
}/*else if (req.url.substr(-4) === '.tsx' || req.url.substr(-3) === '.ts') {
fs.readFile(path.join(dir, req.url), function(err, data){
if( err ){
......@@ -201,7 +201,7 @@ var transformServe = function(dir) {
})
}
});
}else if (req.url.substr(-4) === '.svg') {
}*/else if (req.url.substr(-4) === '.svg') {
console.log('Serve svg', dir, req.url)
fs.readFile(path.join(dir, req.url), function(err, data){
if( err ){
......
pack.js
......@@ -3,6 +3,6 @@ module.exports = {
entry: {js: 'main.jsx', html: 'index.html'},
public: './public',
scss: {
shared: `@import '/base.scss';`
shared: `@import '/main.scss';`
}
};
\ No newline at end of file
};
src/base.scss deleted 100644 → 0
$black: #000;
$white: #fff;
$d-green: #006C43;
$l-green: #34BE5B;
$gray: #a6a6a6;
$font: 'SF Pro Text', Arial, sans-serif;
\ No newline at end of file
src/core/Ajax.ts → src/core/Ajax.jsx
export const Ajax = {
post(url: string, data: any, cb: Function){
post(url, data, cb){
let stringData='';
try{
stringData = JSON.stringify(data);
......@@ -46,7 +46,7 @@ export const Ajax = {
}
},
get(url: string, cb: Function){
get(url, cb){
try{
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
......@@ -91,7 +91,7 @@ export const Ajax = {
}
};
export const AsyncAjax = {
get(url: string) {
get(url) {
return new Promise(function(resolve, reject) {
Ajax.get(url, function(err, data) {
if(err){
......@@ -102,7 +102,7 @@ export const AsyncAjax = {
})
});
},
post(url: string, data: any){
post(url, data){
}
};
\ No newline at end of file
src/core/DOM.js
......@@ -111,7 +111,7 @@ NS.apply = function(a,b) {
var domEl = function( type, cfg ){
if(typeof type === 'function'){
return type(cfg);
return type(cfg, [].slice.call(arguments, 2));
}
cfg = cfg || {};
var cls = cfg.cls || cfg['class'] || cfg.className,
......
src/global-styles/base.scss 0 → 100644
@import "./fonts.scss";
body {
margin: 0;
padding: 0;
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
color: $text-main;
background-color: $bg-main;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.page-content {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
.page-content__inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
src/global-styles/fonts.scss 0 → 100644
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-RegularItalic.woff2") format("woff2"),
url("fonts/SFProText-RegularItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-Medium.woff2") format("woff2"),
url("fonts/SFProText-Medium.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-MediumItalic.woff2") format("woff2"),
url("fonts/SFProText-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-Semibold.woff2") format("woff2"),
url("fonts/SFProText-Semibold.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-SemiboldItalic.woff2") format("woff2"),
url("fonts/SFProText-SemiboldItalic.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-Bold.woff2") format("woff2"),
url("fonts/SFProText-Bold.woff") format("woff");
}
@font-face {
font-family: "SF Pro Text";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("fonts/SFProText-BoldItalic.woff") format("woff");
}
src/global-styles/typography.scss 0 → 100644
@mixin mainTitle {
font-weight: 700;
font-size: 44px;
line-height: 50px;
letter-spacing: 0.01em;
}
@mixin title {
font-weight: 700;
font-size: 32px;
line-height: 40px;
}
@mixin headline {
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@mixin lesserHeadline {
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
@mixin mainSubtitle {
font-weight: 600;
font-size: 18px;
line-height: 22px;
}
@mixin subtitle {
font-weight: 600;
font-size: 16px;
line-height: 22px;
}
@mixin mainBodyText {
font-weight: 500;
font-size: 18px;
line-height: 23px;
color: $gray-dark;
}
@mixin bodyText {
font-weight: 500;
font-size: 17px;
line-height: 22px;
}
@mixin mainCaption {
font-weight: 500;
font-size: 15px;
line-height: 20px;
color: $gray-dark;
}
@mixin caption {
font-weight: 500;
font-size: 13px;
line-height: 17px;
color: $gray-dark;
}
@mixin lesserCaption {
font-weight: 400;
font-size: 12px;
line-height: 17px;
color: $green-gray;
}
src/global-styles/variables.scss 0 → 100644
$bg-main: #ffffff;
$bg-accent: #f6f6f6;
$bg-pattern: #e0e0e0;
$text-main: #000000;
$gray-dark: #575756;
$gray-medium: #a6a6a6;
$gray-light: #dfdfdf;
$accent-main: #34BE5B;
$accent-medium: #259C47;
$accent-dark: #006C43;
$green-gray: #B2C5B7;
$teal: #3B6977;
$red: #FF0000;
$brick: #C94C0A;
$sienna: #D8960D;
$font: 'SF Pro Text', Arial, sans-serif;
src/main.jsx
import './main.scss';
import './view/page/login/Login.jsx';
import './view/page/account/Account.jsx';
import './view/cmp/switch/Switch.jsx';
import Header from './view/block/header/Header.jsx';
import "/global-styles/base.scss";
export default function() {
let tagField, exportEl;
let dom = <div renderTo={document.body} cls="page-content">
<view.block.Header/>
{view.cmp.Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
{Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
login: new view.page.Login(),
main: new view.page.Account(),
})}
......
src/main.scss
@import "base.scss";
@import "/global-styles/variables.scss";
@import "/global-styles/typography.scss";
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
}
body {
margin: 0;
padding: 0;
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
}
.page-content {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
.page-content__inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
//.main-menu, .export-sub-menu, .generate-sub-menu {
// display: flex;
//}
//
//.main-menu-item.main-menu-item__active {
// border-bottom: 5px solid #00832a;
//}
//
//.main-menu-item {
// flex-direction: row;
// padding: 4px 8px 4px;
// margin: 5px 5px 2px 5px;
// border-bottom: 5px solid transparent;
//}
//
//
//.main-menu-item__export {
// margin-left: auto;
//}
//.main-menu {
// border-bottom: 1px solid #00832a;
// //margin-bottom: 15px;
//}
//
//
//.table-item {
// padding: 10px;
// transition: all ease-out 0.3s;
// max-height: 500px;
// opacity: 1;
// position: relative;
//
//}
//
//.table-item:hover {
// background: #ffe476;
//}
//
//
//.table-item:hover .product-cmp {
// background: #fff;
//}
//.table-item__product-components {
// margin-left: -5px;
//}
//.table-item__hidden {
// max-height: 0;
// opacity: 0;
// padding: 0;
//}
//.table-item__hidden-full {
// display: none;
//}
//.table-item-action {
// cursor: pointer
//}
//
//
//.tag {
// color: #125ba1;
// font-style: italic;
// font-size: 14px;
// margin-left: 8px;
//}
//
//.product-cmp {
// border-radius: 8px;
// background: #fff3ca;
// padding: 1px 5px;
// font-size: 12px;
//}
//.product-title {
// font-size: 17px;
// margin-right: 16px;
//}
//
//
//textarea.export-data {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: calc(100vh - 200px);
//}
//
//.export-sub-menu {
// margin-right: 10%;
// margin-bottom: 10px;
//}
//.export-sub-menu .main-menu-item,
//.product-filter__title, .product-filter,
//.generate-sub-menu .main-menu-item{
// color: #fff;
//}
//.main-menu-item {
// cursor: pointer;
// transition: all 0.5s;
//}
//
//.product-filter {
// display: flex;
// padding: 5px;
//}
//.product-filter__title {
// font-size: 20px;
// padding-top:4px;
//}
//.product-filter__input {
// margin-left: 20px;
// padding: 4px 10px;
// font-size: 20px;
// font-family: Verdana;
// flex-grow: 1;
//}
//.product-filter__label {
// margin-right: 16px;
//}
//.highlighted {
// background: #00832a;
// color: #fff;
//}
//.product-filter__hint {
// margin-right: 16px;
//}
//
//
//input:focus, textarea:focus, select:focus {
// outline-color: #00832a;
//}
//.product-filter__area, .title-gradient {
// background: linear-gradient(181deg, #afca0b, #00832a);
// padding: 12px 8px 16px;
//}
//
//.export-panel .title-gradient {
// padding-bottom: 0;
//}
//.export-panel .main-menu-item.main-menu-item__active,
//.generate-panel .main-menu-item.main-menu-item__active{
// border-bottom: 5px solid #fff;
//}
//body {margin: 0; padding: 0}
//
//.tag-manipulations {
// padding: 8px;
//}
//.tag-manipulations__not-active {
// opacity: 0.3;
// pointer-events: none;
//}
//
//.cmp-tag-field {
// display: inline-block;
// width: 300px;
// position: relative;
//}
//.cmp-tag-input {
// width: 100%;
// box-sizing: border-box;
//}
//.cmp-tag-dropdown {
// position: absolute;
// width: 100%;
// background: #fff;
// border: 1px solid #158b26;
// box-sizing: border-box;
// margin-top: -1px;
// z-index: 1;
//}
//.cmp-tag-dropdown-item {
// margin: 8px;
//}
//.cmp-tag-dropdown__hidden {
// display: none;
//}
//.table-item-action {
// display: none;
// cursor: pointer;
// color: #a00;
// position: absolute;
// top: -4px;
//}
//
//.table-item:hover .table-item-action {
// display: inline-block;
//}
//
//.product-description {
// font-size: 14px;
// padding: 16px 0 8px;
// max-width: 480px;
//}
//.quiz-answer-label {
// display: block;
//}
//textarea.generate-debug {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: 500px;
//}
//
//.tag-manipulations-add-tag__comment {
// font-size: 12px
//}
//
//.tag-manipulations-add-tag__comment span{
// margin-left: 16px
//}
//.product-title {
// cursor: pointer;
//}
//
//.generate-title {
// font-size: 18px;
// margin: 16px
//}
//
//.quiz-answer-label {
// margin: 16px 32px 16px 16px;
//}
//.quiz-answer-label input {
// margin-right:8px
//}
//.generate-controls {
// margin:16px
//}
//.generate-seed-label {
// margin: 0 8px 0 32px
//}
//.generate-example {
// position: relative;
//}
//.generate-image {
// position: relative;
// float: right;
// width: 265px;
// margin: -20px 16px 16px;
// border: 2px solid #429d1e;
//}
//.generate-image img {
// width: 100%;
//}
src/svg/arr.svg
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0386 0.346239C10.4106 -0.0716678 11.0612 -0.117742 11.4918 0.243329L16.6433 4.56333C16.8644 4.74875 16.994 5.01657 16.9998 5.30012C17.0056 5.58368 16.8871 5.85629 16.6738 6.0501L11.5223 10.7301C11.1068 11.1075 10.4548 11.0866 10.066 10.6834C9.67714 10.2802 9.69869 9.64734 10.1141 9.26993L14.4293 5.34976L10.1446 1.7567C9.71403 1.39563 9.66656 0.764145 10.0386 0.346239Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5C0 4.94772 0.461282 4.5 1.0303 4.5H15.4545C16.0236 4.5 16.4848 4.94772 16.4848 5.5C16.4848 6.05228 16.0236 6.5 15.4545 6.5H1.0303C0.461282 6.5 0 6.05228 0 5.5Z" fill="white"/>
<svg width="17" height="11" viewBox="0 0 17 11" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0386 0.346239C10.4106 -0.0716678 11.0612 -0.117742 11.4918 0.243329L16.6433 4.56333C16.8644 4.74875 16.994 5.01657 16.9998 5.30012C17.0056 5.58368 16.8871 5.85629 16.6738 6.0501L11.5223 10.7301C11.1068 11.1075 10.4548 11.0866 10.066 10.6834C9.67714 10.2802 9.69869 9.64734 10.1141 9.26993L14.4293 5.34976L10.1446 1.7567C9.71403 1.39563 9.66656 0.764145 10.0386 0.346239Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5C0 4.94772 0.461282 4.5 1.0303 4.5H15.4545C16.0236 4.5 16.4848 4.94772 16.4848 5.5C16.4848 6.05228 16.0236 6.5 15.4545 6.5H1.0303C0.461282 6.5 0 6.05228 0 5.5Z" fill="currentColor"/>
</svg>
src/view/block/header/Header.scss
......@@ -4,6 +4,6 @@
left: 0;
width: 100%;
min-height: 90px;
background-color: $white;
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
}
src/view/cmp/button.scss deleted 100644 → 0
.button {
color: green
}
\ No newline at end of file
src/view/cmp/button.jsx → src/view/cmp/button/Button.jsx
import './button.scss';
export const Button = D.declare('view.cmp.Button', function(cfg) {
return <input type='text' {...cfg} cls='button'/>
});
\ No newline at end of file
export default D.declare('view.cmp.Button', function(cfg, children) {
return <button type={cfg.type} {...cfg}>{children}</button>
});
src/view/cmp/button/button.scss 0 → 100644
.button {
position: relative;
padding: 5px 43px;
text-align: center;
font-weight: 500;
font-size: 17px;
line-height: 36px;
color: $accent-dark;
border-width: 2px;
border-style: solid;
border-color: rgba($bg-main, 0);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
&:active {
color: $accent-medium;
}
&:focus {
color: $accent-medium;
outline: none;
}
&:disabled {
color: $gray-medium;
}
}
.button--primary {
padding: 5px 48px;
min-width: 200px;
color: $bg-main;
background-color: $accent-main;
border-color: $accent-main;
&:active {
color: $bg-main;
}
&:focus {
color: $bg-main;
outline: none;
}
&:disabled {
color: $bg-main;
}
}
src/view/cmp/field/LabeledField.jsx
......@@ -5,7 +5,7 @@ export default D.declare('view.cmp.field.LabeledField', (cfg)=>
<div class="labeled-field">
<label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span>
<Input class="labeled-field__input" type={'text'} {...cfg}/>
<Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
</label>
</div>
)
src/view/cmp/switch/Switch.jsx
export default D.declare('view.cmp.Switch', (cfg, contentHash) => {
export default D.declare('Switch', (cfg, contentHash) => {
if(Array.isArray(contentHash)){
contentHash = contentHash.reduce(function(store, {id, children}) {
store[id] = children;
return store;
}, {});
}
const cmp = div( {
cls: update => (cfg.store || store).sub(
cfg.key,
......@@ -16,4 +23,12 @@ export default D.declare('view.cmp.Switch', (cfg, contentHash) => {
});
return cmp;
});
\ No newline at end of file
});
Switch.Item = function(cfg, children) {
if(!(this instanceof Switch.Item)){
return new Switch.Item(cfg, children);
}
this.id = cfg.id;
this.children = children;
};
\ No newline at end of file
src/view/page/login/Login.jsx
import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss';
import {AsyncAjax} from '/core/Ajax.ts';
import {API} from '/dict/Consts.jsx';
/*import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';*/
const {AND, OR} = Store;
export default D.declare('view.page.Login', () => {
......@@ -36,22 +37,25 @@ export default D.declare('view.page.Login', () => {
<div class="login-page__big-logo">
<Logo width="660" height="300"/>
</div>
{view.cmp.Switch({store: loginStore, key: 'active'}, {
enterPhone: [
<view.cmp.field.LabeledField label={'Login'} bind={loginStore.bind('phone')}/>,
<button
onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}
>Ага</button>
],
enterCode: [
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
<view.cmp.field.LabeledField label={'Code'}/>
]
})}
<h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active'>
<Switch.Item id='enterPhone'>
<view.cmp.field.LabeledField label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
<Button
class={"button button--primary authorization-form__button"}
onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}
>Ну да</Button>
</Switch.Item>
<Switch.Item id='enterCode'>
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
<view.cmp.field.LabeledField label={'Code'}/>
</Switch.Item>
</Switch>
</form>
</div>
})
src/view/page/login/loginPage.scss
.login-page {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 30px 30px;
padding: 54px;
text-align: center;
background-image: url("/uploads/images/bg-leaves.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
}
.login-page__big-logo {
width: 300px;
height: 147px;
}
.login-page__big-logo svg {
display: block;
width: 100%;
height: 100%;
}
.login-page__title {
@include headline;
margin: 0 auto;
max-width: 800px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment