upgraded Web UI library to 2.10.0
13621160019@163.com
parent
c2edc9a805
commit
0fdcec2162
|
|
@ -7930,6 +7930,11 @@
|
|||
"resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
|
||||
"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
|
||||
},
|
||||
"fuse.js": {
|
||||
"version": "6.4.6",
|
||||
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
|
||||
"integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw=="
|
||||
},
|
||||
"gauge": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"echarts-for-react": "^2.0.16",
|
||||
"element-resize-event": "^3.0.3",
|
||||
"emoji-mart": "^3.0.0",
|
||||
"fuse.js": "^6.4.3",
|
||||
"google-maps-react": "^2.0.6",
|
||||
"i18next": "^19.6.3",
|
||||
"is_js": "^0.9.0",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,153 +1,153 @@
|
|||
/*-----------------------------------------------
|
||||
| Navigation Top
|
||||
-----------------------------------------------*/
|
||||
.navbar-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
font-size: map_get($font-sizes, '-1');
|
||||
font-weight: $font-weight-semi-bold;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
.navbar-nav-icons {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.navbar-collapse {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - #{$top-nav-height});
|
||||
margin: 0 -0.75rem;
|
||||
padding: 0 0.75rem;
|
||||
order: 1;
|
||||
}
|
||||
.navbar-toggler {
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
}
|
||||
.navbar-top,
|
||||
.navbar-standard {
|
||||
.navbar-nav:not(.navbar-nav-icons) {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu-card {
|
||||
padding: 0;
|
||||
.card {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.card-notification {
|
||||
min-width: 20rem;
|
||||
@include media-breakpoint-only(xs) {
|
||||
min-width: 17rem;
|
||||
}
|
||||
}
|
||||
.settings-popover {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| Navbar Standard
|
||||
-----------------------------------------------*/
|
||||
.navbar-standard {
|
||||
font-size: map_get($font-sizes, '-1');
|
||||
font-weight: $font-weight-semi-bold;
|
||||
.navbar-collapse {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - #{$standard-nav-height});
|
||||
}
|
||||
}
|
||||
.ie,
|
||||
.edge {
|
||||
.navbar-top {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.navbar-expand-#{$breakpoint} {
|
||||
&.navbar-top {
|
||||
.navbar-collapse {
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
&.navbar {
|
||||
.max-h-dropdown {
|
||||
max-height: 75vh;
|
||||
}
|
||||
}
|
||||
&.navbar-standard {
|
||||
.navbar-collapse {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
&.navbar-top,
|
||||
&.navbar-standard {
|
||||
.navbar-nav:not(.navbar-nav-icons) {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-#{$breakpoint} {
|
||||
&:not(.navbar-vertical) {
|
||||
.navbar-collapse {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-only('xs') {
|
||||
.navbar-top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-card-components {
|
||||
min-width: 20rem;
|
||||
}
|
||||
.navbar-card-auth {
|
||||
min-width: 21rem;
|
||||
}
|
||||
.navbar-card-pages {
|
||||
min-width: 29.6875rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-card-login {
|
||||
min-width: 22rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
.navbar-card-components {
|
||||
min-width: 43.5625rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.navbar-card-auth {
|
||||
min-width: 40.375rem;
|
||||
}
|
||||
}
|
||||
/*-----------------------------------------------
|
||||
| Navigation Top
|
||||
-----------------------------------------------*/
|
||||
.navbar-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
font-size: map_get($font-sizes, '-1');
|
||||
font-weight: $font-weight-semi-bold;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
.navbar-nav-icons {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.navbar-collapse {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - #{$top-nav-height});
|
||||
margin: 0 -0.75rem;
|
||||
padding: 0 0.75rem;
|
||||
order: 1;
|
||||
}
|
||||
.navbar-toggler {
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
}
|
||||
.navbar-top,
|
||||
.navbar-standard {
|
||||
.navbar-nav:not(.navbar-nav-icons) {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu-card {
|
||||
padding: 0;
|
||||
.card {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.card-notification {
|
||||
min-width: 20rem;
|
||||
@include media-breakpoint-only(xs) {
|
||||
min-width: 17rem;
|
||||
}
|
||||
}
|
||||
.settings-popover {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| Navbar Standard
|
||||
-----------------------------------------------*/
|
||||
.navbar-standard {
|
||||
font-size: map_get($font-sizes, '-1');
|
||||
font-weight: $font-weight-semi-bold;
|
||||
.navbar-collapse {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - #{$standard-nav-height});
|
||||
}
|
||||
}
|
||||
.ie,
|
||||
.edge {
|
||||
.navbar-top {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.navbar-expand-#{$breakpoint} {
|
||||
&.navbar-top {
|
||||
.navbar-collapse {
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
&.navbar {
|
||||
.max-h-dropdown {
|
||||
max-height: 75vh;
|
||||
}
|
||||
}
|
||||
&.navbar-standard {
|
||||
.navbar-collapse {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
&.navbar-top,
|
||||
&.navbar-standard {
|
||||
.navbar-nav:not(.navbar-nav-icons) {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-#{$breakpoint} {
|
||||
&:not(.navbar-vertical) {
|
||||
.navbar-collapse {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-only('xs') {
|
||||
.navbar-top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-card-components {
|
||||
min-width: 20rem;
|
||||
}
|
||||
.navbar-card-auth {
|
||||
min-width: 21rem;
|
||||
}
|
||||
.navbar-card-pages {
|
||||
min-width: 29.6875rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-card-login {
|
||||
min-width: 22rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
.navbar-card-components {
|
||||
min-width: 43.5625rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.navbar-card-auth {
|
||||
min-width: 40.375rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
.dropdown-item {
|
||||
font-weight: $font-weight-medium;
|
||||
@include hover-focus {
|
||||
background-color: initial;
|
||||
color: $gray-1000;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,65 @@
|
|||
/*-----------------------------------------------
|
||||
| Search box
|
||||
-----------------------------------------------*/
|
||||
.search-box{
|
||||
position: relative;
|
||||
.search-input{
|
||||
width: 20rem;
|
||||
padding-left: 1.95rem;
|
||||
line-height: 2;
|
||||
}
|
||||
.search-box-icon{
|
||||
z-index: 1020;
|
||||
top: 50%;
|
||||
left: 0.9rem;
|
||||
transform: translateY(-48%);
|
||||
}
|
||||
}
|
||||
/*-----------------------------------------------
|
||||
| Search box
|
||||
-----------------------------------------------*/
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 21rem;
|
||||
font-size: map-get($font-sizes, '-1');
|
||||
|
||||
.search-box-icon {
|
||||
position: absolute;
|
||||
color: $gray-400;
|
||||
top: 50%;
|
||||
left: 0.9rem;
|
||||
transform: translateY(-48%);
|
||||
}
|
||||
.search-input {
|
||||
padding-left: 2rem;
|
||||
line-height: 1.7;
|
||||
border-radius: 50rem;
|
||||
box-shadow: none;
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
outline: none !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: map_get($spacers, 1);
|
||||
margin-right: map_get($spacers, 3);
|
||||
font-size: map_get($font-sizes, '-1');
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 1px solid $border-color;
|
||||
font-family: $font-family-base;
|
||||
left: 0;
|
||||
margin-top: map-get($spacers, 2);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not(.show) {
|
||||
[data-dismiss='search'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-thumbnail {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.safari {
|
||||
.search-box .search-input {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,3 +42,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.hover-primary {
|
||||
@include hover-focus {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,75 @@
|
|||
/*-----------------------------------------------
|
||||
| Position
|
||||
-----------------------------------------------*/
|
||||
@each $breakpoint in map_keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $position in $positions {
|
||||
.position#{$infix}-#{$position} {
|
||||
position: $position !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| For Stickyfill on IE
|
||||
-----------------------------------------------*/
|
||||
.sticky-top {
|
||||
z-index: 1015;
|
||||
//position: sticky;
|
||||
//top: 0
|
||||
}
|
||||
.sticky-bottom {
|
||||
z-index: 1019;
|
||||
position: sticky;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| Position
|
||||
-----------------------------------------------*/
|
||||
.container, .container-fluid { position: relative; }
|
||||
|
||||
.a-0, .t-0 { top: 0; }
|
||||
.a-0, .b-0 { bottom: 0; }
|
||||
.a-0, .l-0 { left: 0; }
|
||||
.a-0, .r-0 { right: 0; }
|
||||
|
||||
.absolute-centered{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
.absolute-vertical-center{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Used in product list page
|
||||
@include media-breakpoint-up(sm) {
|
||||
.absolute-sm-centered{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
/*-----------------------------------------------
|
||||
| Position
|
||||
-----------------------------------------------*/
|
||||
@each $breakpoint in map_keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $position in $positions {
|
||||
.position#{$infix}-#{$position} {
|
||||
position: $position !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| For Stickyfill on IE
|
||||
-----------------------------------------------*/
|
||||
.sticky-top {
|
||||
z-index: 1015;
|
||||
//position: sticky;
|
||||
//top: 0
|
||||
}
|
||||
.sticky-bottom {
|
||||
z-index: 1019;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------
|
||||
| Position
|
||||
-----------------------------------------------*/
|
||||
.container,
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.a-0,
|
||||
.t-0 {
|
||||
top: 0 !important;
|
||||
}
|
||||
.a-0,
|
||||
.b-0 {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.a-0,
|
||||
.l-0 {
|
||||
left: 0 !important;
|
||||
}
|
||||
.a-0,
|
||||
.r-0 {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.absolute-centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
.absolute-vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Used in product list page
|
||||
@include media-breakpoint-up(sm) {
|
||||
.absolute-sm-centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import { Card, CardBody } from 'reactstrap';
|
||||
import PageHeader from '../common/PageHeader';
|
||||
import FalconCardHeader from '../common/FalconCardHeader';
|
||||
import FalconEditor from '../common/FalconEditor';
|
||||
import SearchBox from '../navbar/SearchBox';
|
||||
import autoCompleteInitialItem from '../../data/autocomplete/autocomplete';
|
||||
|
||||
const alertCode = `function Searchbox () {
|
||||
return <SearchBox autoCompleteItem={autoCompleteInitialItem} />
|
||||
}`;
|
||||
|
||||
const AutocompleteExample = () => (
|
||||
<Fragment>
|
||||
<PageHeader
|
||||
title="Autocomplete Search"
|
||||
description="An autocomplete search dropdown with clean and simple design."
|
||||
className="mb-3"
|
||||
/>
|
||||
<Card className="mb-3">
|
||||
<FalconCardHeader title="Example" light={false} />
|
||||
<CardBody className="bg-light">
|
||||
<FalconEditor code={alertCode} scope={{ SearchBox, autoCompleteInitialItem }} language="jsx" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default AutocompleteExample;
|
||||
|
|
@ -1,4 +1,25 @@
|
|||
export default [
|
||||
{
|
||||
title: `2.10.0 - Eurasian hobby`,
|
||||
publish: '14 September, 2020',
|
||||
logs: {
|
||||
New: ['<strong>Component</strong> : Autocomplete', '<strong>Plugin</strong> : <code>FuseJS</code>'],
|
||||
Migration: {
|
||||
Add: ['<code>src/components/bootstrap-component/AutocompleteExample.js</code>'],
|
||||
Update: [
|
||||
'<code>src/data/autocomplete/autocomplete.js</code>',
|
||||
'<code>src/components/navbar/NavbarTop.js</code>',
|
||||
'<code>src/components/navbar/NavbarDropdownComponents.js</code>',
|
||||
'<code>src/components/navbar/NavbarDropdown.js</code>',
|
||||
'<code>src/components/navbar/SearchBox.js</code>',
|
||||
'<code>src/assets/scss/theme/_search-box.scss</code>',
|
||||
'<code>src/assets/scss/theme/_hover.scss</code>',
|
||||
'<code>src/assets/scss/theme/_navbar.scss</code>',
|
||||
'Move All variables From <code>src/assets/scss/theme/_navbar-vertical.scss</code> To <code>src/assets/scss/theme/_variables.scss</code>'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: `2.9.0 - Banded kestrel`,
|
||||
publish: '02 September, 2020',
|
||||
|
|
@ -12,7 +33,7 @@ export default [
|
|||
Add: [
|
||||
'<code>src/components/calendar/*.*</code>',
|
||||
'<code>src/components/plugins/CalenderExample.js</code>',
|
||||
'<code>src/assets/scss/theme/_full-calender.scss</code>'
|
||||
'<code>src/assets/scss/theme/plugins/_full-calender.scss</code>'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const NavbarDropdown = ({ title, items, right, children, handleSetNavbarCollapse
|
|||
{title === 'Authentication' && (
|
||||
<img src={AuthCornerImage} alt="" className="position-absolute b-0 r-0" width={130} />
|
||||
)}
|
||||
<CardBody className={classNames('scrollbar', { 'p-2': title === 'Home' })}>
|
||||
<CardBody className={classNames('scrollbar px-0 py-2', { 'p-0': title === 'Home' })}>
|
||||
<div className="nav flex-column">
|
||||
{title === 'Home' ? (
|
||||
items.map(({ to, name }, index) => (
|
||||
|
|
@ -86,7 +86,7 @@ const NavbarDropdown = ({ title, items, right, children, handleSetNavbarCollapse
|
|||
</DropdownItem>
|
||||
))
|
||||
) : (
|
||||
<Row>
|
||||
<Row noGutters>
|
||||
{navItemGroup.map((groupItem, index) => {
|
||||
return (
|
||||
<Col
|
||||
|
|
@ -102,14 +102,8 @@ const NavbarDropdown = ({ title, items, right, children, handleSetNavbarCollapse
|
|||
|
||||
return (
|
||||
<Fragment key={`${index}-${i}`}>
|
||||
{title && <div className="nav-link py-1 pl-0 text-900 font-weight-bold">{title}</div>}
|
||||
<DropdownItem
|
||||
tag={Link}
|
||||
to={navItem.to}
|
||||
key={i}
|
||||
className="pl-0"
|
||||
onClick={handleSetNavbarCollapsed}
|
||||
>
|
||||
{title && <div className="nav-link py-1 text-900 font-weight-bold">{title}</div>}
|
||||
<DropdownItem tag={Link} to={navItem.to} key={i} onClick={handleSetNavbarCollapsed}>
|
||||
{navItem.name}
|
||||
{navItem.badge && (
|
||||
<Badge color={navItem.badge.color || 'soft-success'} pill className="ml-2">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const NavbarDropdownComponents = ({ title, items, right, handleSetNavbarCollapse
|
|||
<DropdownMenu right={right} className="dropdown-menu-card mt-0">
|
||||
{isIterableArray(items) && (
|
||||
<Card className="navbar-card-components shadow-none">
|
||||
<CardBody className="max-h-dropdown scrollbar">
|
||||
<CardBody className="max-h-dropdown scrollbar px-0 py-2">
|
||||
<div className="nav flex-column">
|
||||
{items.map((groupItem, index) => {
|
||||
const NavItemGroup = routesSlicer({
|
||||
|
|
@ -46,9 +46,9 @@ const NavbarDropdownComponents = ({ title, items, right, handleSetNavbarCollapse
|
|||
return (
|
||||
<Fragment key={index}>
|
||||
{index !== 0 && (
|
||||
<div className="nav-link pl-0 py-1 text-900 font-weight-bold">{items[index].name}</div>
|
||||
<div className="nav-link py-1 text-900 font-weight-bold">{items[index].name}</div>
|
||||
)}
|
||||
<Row className={index + 1 === items.length ? 'mb-0' : 'mb-3'}>
|
||||
<Row className={index + 1 === items.length ? 'mb-0' : 'mb-3'} noGutters>
|
||||
{NavItemGroup.map((navItems, i) => {
|
||||
return (
|
||||
<Fragment key={`${index}-${i}`}>
|
||||
|
|
@ -59,7 +59,6 @@ const NavbarDropdownComponents = ({ title, items, right, handleSetNavbarCollapse
|
|||
tag={Link}
|
||||
to={navItem.to}
|
||||
key={`${index}-${i}-${j}`}
|
||||
className="pl-0"
|
||||
onClick={handleSetNavbarCollapsed}
|
||||
>
|
||||
{t(navItem.name)}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import SearchBox from './SearchBox';
|
|||
import TopNavRightSideNavItem from './TopNavRightSideNavItem';
|
||||
import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
|
||||
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||
import autoCompleteInitialItem from '../../data/autocomplete/autocomplete';
|
||||
|
||||
const NavbarTop = () => {
|
||||
const {
|
||||
|
|
@ -26,7 +27,7 @@ const NavbarTop = () => {
|
|||
<Navbar
|
||||
light
|
||||
className="navbar-glass fs--1 font-weight-semi-bold row navbar-top sticky-kit"
|
||||
expand={topNavbarBreakpoint}
|
||||
expand={isTopNav && topNavbarBreakpoint}
|
||||
>
|
||||
<div
|
||||
className={classNames('toggle-icon-wrapper mr-md-3 mr-2', {
|
||||
|
|
@ -45,19 +46,20 @@ const NavbarTop = () => {
|
|||
</button>
|
||||
</div>
|
||||
<Logo at="navbar-top" width={40} id="topLogo" />
|
||||
<Collapse navbar isOpen={navbarCollapsed} className="scrollbar">
|
||||
{!isTopNav ? (
|
||||
<Nav navbar className="align-items-center d-none d-lg-block">
|
||||
<NavItem>
|
||||
<SearchBox />
|
||||
</NavItem>
|
||||
</Nav>
|
||||
) : (
|
||||
{isTopNav ? (
|
||||
<Collapse navbar isOpen={navbarCollapsed} className="scrollbar">
|
||||
<Nav navbar>
|
||||
<NavbarTopDropDownMenus setNavbarCollapsed={setNavbarCollapsed} />
|
||||
</Nav>
|
||||
)}
|
||||
</Collapse>
|
||||
</Collapse>
|
||||
) : (
|
||||
<Nav navbar className={`align-items-center d-none d-${topNavbarBreakpoint}-block`}>
|
||||
<NavItem>
|
||||
<SearchBox autoCompleteItem={autoCompleteInitialItem} />
|
||||
</NavItem>
|
||||
</Nav>
|
||||
)}
|
||||
|
||||
<TopNavRightSideNavItem />
|
||||
</Navbar>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,174 @@
|
|||
import React from 'react';
|
||||
import { Form, Input } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
const SearchBox = () => (
|
||||
<Form inline className="search-box">
|
||||
<Input type="search" placeholder="Search..." aria-label="Search" className="rounded-pill search-input" />
|
||||
<FontAwesomeIcon icon="search" className="position-absolute text-400 search-box-icon" />
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default SearchBox;
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import { DropdownItem, DropdownMenu, Form, Input, Dropdown, DropdownToggle, Badge, Media } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import Fuse from 'fuse.js/dist/fuse.esm';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Avatar from '../common/Avatar';
|
||||
import { isIterableArray } from '../../helpers/utils';
|
||||
import Flex from '../common/Flex';
|
||||
|
||||
const MediaSearchContent = ({ item }) => {
|
||||
return (
|
||||
<DropdownItem className="px-card py-2" tag={Link} to={item.url}>
|
||||
<Media className="align-item-center">
|
||||
{item.file && (
|
||||
<div className="file-thumbnail">
|
||||
<img src={item.img} alt="" className={item.imgAttrs.class} />
|
||||
</div>
|
||||
)}
|
||||
{item.icon && <Avatar src={item.icon.img} size="l" className={item.icon.status} />}
|
||||
|
||||
<Media body className="ml-2">
|
||||
<h6 className="mb-0">{item.title}</h6>
|
||||
<p className="fs--2 mb-0" dangerouslySetInnerHTML={{ __html: item.text || item.time }} />
|
||||
</Media>
|
||||
</Media>
|
||||
</DropdownItem>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchBox = ({ autoCompleteItem }) => {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [searchInputValue, setSearchInputValue] = useState('');
|
||||
const [resultItem, setResultItem] = useState(autoCompleteItem);
|
||||
|
||||
const fuseJsOptions = {
|
||||
includeScore: true,
|
||||
keys: ['title', 'text', 'breadCrumbTexts']
|
||||
};
|
||||
|
||||
let searchResult = new Fuse(autoCompleteItem, fuseJsOptions).search(searchInputValue).map(item => item.item);
|
||||
|
||||
const recentlyBrowsedItems = resultItem.filter(item => item.catagories === 'recentlyBrowsedItems');
|
||||
|
||||
const suggestedFilters = resultItem.filter(item => item.catagories === 'suggestedFilters');
|
||||
|
||||
const suggestionFiles = resultItem.filter(item => item.catagories === 'suggestionFiles');
|
||||
|
||||
const suggestionMembers = resultItem.filter(item => item.catagories === 'suggestionMembers');
|
||||
|
||||
const toggle = () => setDropdownOpen(prevState => !prevState);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchInputValue) {
|
||||
setResultItem(searchResult);
|
||||
isIterableArray(searchResult) ? setDropdownOpen(true) : setDropdownOpen(false);
|
||||
} else {
|
||||
setResultItem(autoCompleteItem);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
}, [searchInputValue]);
|
||||
|
||||
return (
|
||||
<Dropdown isOpen={dropdownOpen} toggle={toggle} className="search-box">
|
||||
<DropdownToggle tag="div" data-toggle="dropdown" aria-expanded={dropdownOpen}>
|
||||
<Form>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
className="rounded-pill search-input"
|
||||
value={searchInputValue}
|
||||
onChange={({ target }) => setSearchInputValue(target.value)}
|
||||
onClick={() => setDropdownOpen(false)}
|
||||
/>
|
||||
<FontAwesomeIcon icon="search" className="position-absolute text-400 search-box-icon" />
|
||||
</Form>
|
||||
{searchInputValue && (
|
||||
<button className="close" onClick={() => setSearchInputValue('')}>
|
||||
<FontAwesomeIcon icon="times" />
|
||||
</button>
|
||||
)}
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<div className="scrollbar py-3" style={{ maxHeight: '24rem' }}>
|
||||
{isIterableArray(recentlyBrowsedItems) && (
|
||||
<>
|
||||
<DropdownItem className="px-card pt-0 pb-2" header>
|
||||
Recently Browsed{' '}
|
||||
</DropdownItem>
|
||||
{recentlyBrowsedItems.map((item, index) => (
|
||||
<DropdownItem
|
||||
tag={Link}
|
||||
to={item.url}
|
||||
className="fs--1 px-card py-1 hover-primary text-base"
|
||||
key={index}
|
||||
>
|
||||
<Flex align="center">
|
||||
<FontAwesomeIcon icon="circle" className="mr-2 text-300 fs--2" />
|
||||
<div className="font-weight-normal">
|
||||
{item.breadCrumbTexts.map((breadCrumbText, index) => {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
{breadCrumbText}
|
||||
{item.breadCrumbTexts.length - 1 > index && (
|
||||
<FontAwesomeIcon
|
||||
icon="chevron-right"
|
||||
className="mx-1 text-500 fs--2"
|
||||
transform="shrink 2"
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Flex>
|
||||
</DropdownItem>
|
||||
))}
|
||||
{(isIterableArray(suggestedFilters) ||
|
||||
isIterableArray(suggestionFiles) ||
|
||||
isIterableArray(suggestionMembers)) && <hr className="border-200" />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isIterableArray(suggestedFilters) && (
|
||||
<>
|
||||
<DropdownItem className="px-card pt-0 pb-2" header>
|
||||
Suggested Filter
|
||||
</DropdownItem>
|
||||
{suggestedFilters.map((item, index) => (
|
||||
<DropdownItem tag={Link} to={item.url} className=" px-card py-1 fs-0" key={index}>
|
||||
<Flex align="center">
|
||||
<Badge color={`soft-${item.type}`} className="font-weight-medium text-decoration-none mr-2">
|
||||
{item.key}:{' '}
|
||||
</Badge>
|
||||
<div className="flex-1 fs--1">{item.text}</div>
|
||||
</Flex>
|
||||
</DropdownItem>
|
||||
))}
|
||||
{(isIterableArray(suggestionFiles) || isIterableArray(suggestionMembers)) && (
|
||||
<hr className="border-200" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isIterableArray(suggestionFiles) && (
|
||||
<>
|
||||
<DropdownItem className="px-card pt-0 pb-2" header>
|
||||
Files
|
||||
</DropdownItem>
|
||||
{suggestionFiles.map((item, index) => (
|
||||
<MediaSearchContent item={item} key={index} />
|
||||
))}
|
||||
{isIterableArray(suggestionMembers) && <hr className="border-200" />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isIterableArray(suggestionMembers) && (
|
||||
<>
|
||||
<DropdownItem className="px-card pt-0 pb-2" header>
|
||||
Members
|
||||
</DropdownItem>
|
||||
{suggestionMembers.map((item, index) => (
|
||||
<MediaSearchContent item={item} key={index} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBox;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import imageFile1 from '../../assets/img/products/3-thumb.png';
|
||||
import imageFile2 from '../../assets/img/icons/zip.png';
|
||||
import imageMember1 from '../../assets/img/team/1.jpg';
|
||||
import imageMember2 from '../../assets/img/team/2.jpg';
|
||||
import imageMember3 from '../../assets/img/team/3.jpg';
|
||||
|
||||
const autoCompleteInitialItem = [
|
||||
{ url: `/pages/events`, breadCrumbTexts: ['Pages ', ' Events'], catagories: 'recentlyBrowsedItems' },
|
||||
{
|
||||
url: `/e-commerce/customers`,
|
||||
breadCrumbTexts: ['E-commerce ', ' Customers'],
|
||||
catagories: 'recentlyBrowsedItems'
|
||||
},
|
||||
{
|
||||
catagories: 'suggestedFilters',
|
||||
url: `/e-commerce/customers`,
|
||||
key: 'customers',
|
||||
text: 'All customers list',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
catagories: 'suggestedFilters',
|
||||
url: `/pages/events`,
|
||||
key: 'events',
|
||||
text: 'Latest events in current month',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
catagories: 'suggestedFilters',
|
||||
url: `/e-commerce/products/grid`,
|
||||
key: 'products',
|
||||
text: 'Most popular products',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
catagories: 'suggestionFiles',
|
||||
url: '#!',
|
||||
img: imageFile1,
|
||||
file: true,
|
||||
title: 'iPhone',
|
||||
imgAttrs: { class: 'border h-100 w-100 fit-cover rounded-lg' },
|
||||
time:
|
||||
'<span class="font-weight-semi-bold">Antony</span><span class="font-weight-medium text-600 ml-2">27 Sep at 10:30 AM</span>'
|
||||
},
|
||||
{
|
||||
catagories: 'suggestionFiles',
|
||||
url: '#!',
|
||||
img: imageFile2,
|
||||
file: true,
|
||||
title: 'Falcon v1.8.2',
|
||||
imgAttrs: { class: 'img-fluid' },
|
||||
time:
|
||||
'<span class="font-weight-semi-bold">John</span><span class="font-weight-medium text-600 ml-2">30 Sep at 12:30 PM</span>'
|
||||
},
|
||||
{
|
||||
url: `/pages/profile`,
|
||||
catagories: 'suggestionMembers',
|
||||
icon: { img: imageMember1, size: 'l', status: 'status-online' },
|
||||
title: 'Anna Karinina',
|
||||
text: 'Technext Limited'
|
||||
},
|
||||
{
|
||||
url: `/pages/profile`,
|
||||
catagories: 'suggestionMembers',
|
||||
icon: { img: imageMember2, size: 'l' },
|
||||
title: 'Antony Hopkins',
|
||||
text: 'Brain Trust'
|
||||
},
|
||||
{
|
||||
url: `/pages/profile`,
|
||||
catagories: 'suggestionMembers',
|
||||
icon: { img: imageMember3, size: 'l' },
|
||||
title: 'Emma Watson',
|
||||
text: 'Google'
|
||||
}
|
||||
];
|
||||
|
||||
export default autoCompleteInitialItem;
|
||||
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import Alerts from '../components/bootstrap-components/Alerts';
|
||||
import Avatar from '../components/bootstrap-components/Avatar';
|
||||
import AutocompleteExample from '../components/bootstrap-components/AutocompleteExample';
|
||||
import Backgrounds from '../components/bootstrap-components/Backgrounds';
|
||||
import Badges from '../components/bootstrap-components/Badges';
|
||||
import Breadcrumbs from '../components/bootstrap-components/Breadcrumb';
|
||||
|
|
@ -180,6 +181,7 @@ const DashboardRoutes = () => (
|
|||
|
||||
{/*Components*/}
|
||||
<Route path="/components/alerts" exact component={Alerts} />
|
||||
<Route path="/components/autocomplete" exact component={AutocompleteExample} />
|
||||
<Route path="/components/accordions" exact component={FalconAccordions} />
|
||||
<Route path="/components/avatar" exact component={Avatar} />
|
||||
<Route path="/components/badges" exact component={Badges} />
|
||||
|
|
|
|||
|
|
@ -122,6 +122,13 @@ import { Trans } from 'react-i18next'
|
|||
// icon: 'poll'
|
||||
// };
|
||||
|
||||
// export const calenderRoutes = {
|
||||
// name: 'Calendar',
|
||||
// to: '/calendar',
|
||||
// exact: true,
|
||||
// icon: 'calendar-alt'
|
||||
// };
|
||||
|
||||
// export const chatRoutes = {
|
||||
// name: 'Chat',
|
||||
// to: '/chat',
|
||||
|
|
@ -147,6 +154,7 @@ import { Trans } from 'react-i18next'
|
|||
// ]
|
||||
// };
|
||||
|
||||
|
||||
// export const documentationRoutes = {
|
||||
// name: 'Documentation',
|
||||
// to: '/documentation',
|
||||
|
|
@ -483,6 +491,7 @@ export default [
|
|||
// pageRoutes,
|
||||
// chatRoutes,
|
||||
// kanbanRoutes,
|
||||
// calenderRoutes,
|
||||
// emailRoutes,
|
||||
// authenticationRoutes,
|
||||
// ECommerceRoutes,
|
||||
|
|
|
|||
Loading…
Reference in New Issue